/* ============================================================
   FLUXION — DESIGN TOKENS
   Derived from the Fluxion logo: deep navy + electric cyan
   ============================================================ */

/* ---- Light Mode (default) ---- */
:root {
  /* Backgrounds */
  --bg-primary:       #EEF2FB;
  --bg-surface:       #FFFFFF;
  --bg-elevated:      #F5F8FF;
  --bg-sidebar:       #0B1E3D;
  --bg-sidebar-hover: #132A52;
  --bg-sidebar-active:#00A8D8;
  --bg-overlay:       rgba(10, 15, 30, 0.55);
  --bg-code:          #F0F4FF;

  /* Brand colours */
  --color-accent:       #00A8D8;
  --color-accent-hover: #0090BE;
  --color-accent-light: #E0F6FF;
  --color-navy:         #0F2A5E;
  --color-navy-mid:     #1A4080;
  --color-cyan-glow:    rgba(0, 168, 216, 0.15);

  /* Text */
  --color-text:         #0D1526;
  --color-text-muted:   #5A6A8A;
  --color-text-faint:   #94A3B8;
  --color-text-inverse: #FFFFFF;
  --color-text-sidebar: #C8D8F0;
  --color-text-sidebar-active: #FFFFFF;

  /* Borders */
  --color-border:       #D4DDF0;
  --color-border-focus: #00A8D8;
  --color-border-strong:#A0B0D0;

  /* Semantic states */
  --color-success:      #10B981;
  --color-success-bg:   #ECFDF5;
  --color-success-text: #065F46;
  --color-warning:      #F59E0B;
  --color-warning-bg:   #FFFBEB;
  --color-warning-text: #92400E;
  --color-critical:     #EF4444;
  --color-critical-bg:  #FEF2F2;
  --color-critical-text:#991B1B;
  --color-info:         #3B82F6;
  --color-info-bg:      #EFF6FF;
  --color-info-text:    #1E40AF;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15, 42, 94, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 42, 94, 0.08);
  --shadow-md:  0 4px 16px rgba(15, 42, 94, 0.10);
  --shadow-lg:  0 8px 32px rgba(15, 42, 94, 0.12);
  --shadow-xl:  0 16px 48px rgba(15, 42, 94, 0.16);

  /* Radius — Sharp geometric technical aesthetic */
  --radius-xs:  0px;
  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --radius-xl:  0px;
  --radius-full:0px;
  --radius-button: 0px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;
  --font-size-6xl:  60px;

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
  --transition-page: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --sidebar-width:         260px;
  --sidebar-width-collapsed: 68px;
  --topbar-height:         64px;
  --content-max-width:     1440px;
  --auth-card-width:       440px;

  /* Z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:       #080E1C;
  --bg-surface:       #0F1A2E;
  --bg-elevated:      #162035;
  --bg-sidebar:       #060C18;
  --bg-sidebar-hover: #0E1B30;
  --bg-sidebar-active:#00A8D8;
  --bg-overlay:       rgba(0, 8, 20, 0.75);
  --bg-code:          #0C1424;

  /* Brand colours — same accent, adjusted lightness */
  --color-accent:       #00C8FF;
  --color-accent-hover: #00AADD;
  --color-accent-light: rgba(0, 200, 255, 0.12);
  --color-navy:         #1A4080;
  --color-navy-mid:     #2855A0;
  --color-cyan-glow:    rgba(0, 200, 255, 0.12);

  /* Text */
  --color-text:         #E8F0FF;
  --color-text-muted:   #7B8DB0;
  --color-text-faint:   #4A5A78;
  --color-text-inverse: #0D1526;
  --color-text-sidebar: #8AA0C8;
  --color-text-sidebar-active: #FFFFFF;

  /* Borders */
  --color-border:       #1C2D48;
  --color-border-focus: #00C8FF;
  --color-border-strong:#2A3F60;

  /* Semantic states — same hues, same tokens */
  --color-success:      #10B981;
  --color-success-bg:   rgba(16, 185, 129, 0.12);
  --color-success-text: #6EE7B7;
  --color-warning:      #FBBF24;
  --color-warning-bg:   rgba(251, 191, 36, 0.12);
  --color-warning-text: #FDE68A;
  --color-critical:     #F87171;
  --color-critical-bg:  rgba(248, 113, 113, 0.12);
  --color-critical-text:#FECACA;
  --color-info:         #60A5FA;
  --color-info-bg:      rgba(96, 165, 250, 0.12);
  --color-info-text:    #BFDBFE;

  /* Shadows — deeper in dark */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.5);
}