/**
 * Syxflow Design Tokens & Variables
 * Derived from Syxflow brand identity (#012048 navy, #00D2FF cyan, #0052CC blue)
 */

:root {
  /* Brand Colors */
  --syx-navy-950: #011229;
  --syx-navy-900: #012048; /* Core brand navy */
  --syx-navy-800: #052c61;
  --syx-navy-700: #0a3d82;
  --syx-navy-600: #1050a6;
  
  --syx-blue-600: #0052CC; /* Tech blue */
  --syx-blue-500: #0066FF;
  --syx-blue-400: #2684FF;
  
  --syx-cyan-500: #00B4D8;
  --syx-cyan-400: #00D2FF; /* Core electric cyan */
  --syx-cyan-300: #48E5FF;
  --syx-cyan-100: #E0FAFF;
  
  /* Neutral Slate Scales */
  --syx-slate-900: #0F172A;
  --syx-slate-800: #1E293B;
  --syx-slate-700: #334155;
  --syx-slate-600: #475569;
  --syx-slate-500: #64748B;
  --syx-slate-400: #94A3B8;
  --syx-slate-300: #CBD5E1;
  --syx-slate-200: #E2E8F0;
  --syx-slate-100: #F1F5F9;
  --syx-slate-50:  #F8FAFC;
  --syx-white:     #FFFFFF;

  /* Semantic Highlights */
  --syx-success: #10B981;
  --syx-success-bg: rgba(16, 185, 129, 0.08);
  --syx-success-border: rgba(16, 185, 129, 0.2);
  
  --syx-warning: #F59E0B;
  --syx-warning-bg: rgba(245, 158, 11, 0.08);
  --syx-warning-border: rgba(245, 158, 11, 0.2);

  --syx-danger: #EF4444;
  --syx-info: #00D2FF;

  /* Surfaces & Backgrounds */
  --syx-bg-primary: #FFFFFF;
  --syx-bg-subtle: #F8FAFC;
  --syx-bg-card: #FFFFFF;
  --syx-bg-glass: rgba(255, 255, 255, 0.82);
  --syx-bg-dark-surface: #031835;
  --syx-bg-dark-card: #05244C;
  
  /* Borders */
  --syx-border-subtle: #E2E8F0;
  --syx-border-medium: #CBD5E1;
  --syx-border-accent: rgba(0, 210, 255, 0.3);
  --syx-border-glass: rgba(255, 255, 255, 0.12);

  /* Typography */
  --syx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --syx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  --syx-text-headline: var(--syx-navy-900);
  --syx-text-body: var(--syx-slate-700);
  --syx-text-muted: var(--syx-slate-500);
  --syx-text-light: var(--syx-slate-400);

  /* Shadows */
  --syx-shadow-xs: 0 1px 2px 0 rgba(1, 32, 72, 0.04);
  --syx-shadow-sm: 0 2px 6px -1px rgba(1, 32, 72, 0.06), 0 1px 3px -1px rgba(1, 32, 72, 0.03);
  --syx-shadow-md: 0 6px 16px -2px rgba(1, 32, 72, 0.07), 0 2px 6px -1px rgba(1, 32, 72, 0.04);
  --syx-shadow-lg: 0 16px 32px -4px rgba(1, 32, 72, 0.08), 0 4px 10px -2px rgba(1, 32, 72, 0.04);
  --syx-shadow-xl: 0 24px 48px -12px rgba(1, 32, 72, 0.12), 0 8px 18px -4px rgba(1, 32, 72, 0.05);
  --syx-shadow-mockup: 0 35px 70px -15px rgba(1, 32, 72, 0.16), 0 0 0 1px rgba(1, 32, 72, 0.06);
  --syx-shadow-glow: 0 0 40px rgba(0, 210, 255, 0.22);
  --syx-shadow-pill: 0 12px 28px -6px rgba(1, 32, 72, 0.12), 0 0 0 1px rgba(1, 32, 72, 0.04);

  /* Radii */
  --syx-radius-xs: 4px;
  --syx-radius-sm: 8px;
  --syx-radius-md: 12px;
  --syx-radius-lg: 18px;
  --syx-radius-xl: 24px;
  --syx-radius-full: 9999px;

  /* Transitions */
  --syx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --syx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --syx-duration-fast: 150ms;
  --syx-duration-base: 250ms;
  --syx-duration-slow: 400ms;

  /* Layout */
  --syx-container-max: 1240px;
  --syx-container-wide: 1360px;
  --syx-header-height: 80px;
}