/* ==========================================================================
   DESIGN TOKENS & THEME VARIABLES
   Architecture: Editorial B2B Studio (Carbon / Stone + Burnt Vermilion Lock)
   Dials: DESIGN_VARIANCE: 7 | MOTION_INTENSITY: 5 | VISUAL_DENSITY: 4
   ========================================================================== */

:root {
  /* Typography (No Inter default; Outfit display + Plus Jakarta Sans body) */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Shape Consistency Lock:
     - Buttons, inputs, badges, toggles: 8px (--radius-btn / --radius-input)
     - Content panels, bento tiles, dialogs, media: 12px (--radius-card) */
  --radius-btn: 0.5rem;
  --radius-input: 0.5rem;
  --radius-card: 0.75rem;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Systemic Z-Index Scale */
  --z-base: 1;
  --z-nav: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* Motivated Motion Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* ==========================================================================
   DARK THEME (DEFAULT - Architectural Carbon + Burnt Vermilion)
   No pure #000000 or #ffffff. Single locked accent across all sections.
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg-primary: #0c0d0f;
  --bg-secondary: #121418;
  --bg-surface: #171a1f;
  --bg-surface-elevated: #1e2229;
  --bg-surface-tinted: #191515;
  --bg-nav: rgba(12, 13, 15, 0.88);

  /* Typography Hierarchy (WCAG AA/AAA verified) */
  --text-primary: #f2f3f5;
  --text-secondary: #a3aab8;
  --text-muted: #7b8393;
  --text-on-accent: #fafaf9;

  /* Single Locked Accent (Burnt Vermilion, saturation < 80%) */
  --accent: #e05638;
  --accent-strong: #c43c1f;
  --accent-hover: #d6482a;
  --accent-subtle: rgba(224, 86, 56, 0.11);
  --accent-border: rgba(224, 86, 56, 0.32);

  /* Borders & Hairlines */
  --border-subtle: rgba(242, 243, 245, 0.09);
  --border-strong: rgba(242, 243, 245, 0.17);
  --border-focus: #e05638;

  /* Tinted Shadows (No neon glows) */
  --shadow-sm: 0 2px 8px rgba(5, 6, 8, 0.35);
  --shadow-md: 0 10px 28px rgba(5, 6, 8, 0.45);
  --shadow-lg: 0 20px 48px rgba(5, 6, 8, 0.6);

  /* Form Tokens (WCAG AA contrast verified) */
  --form-bg: #121418;
  --form-border: rgba(242, 243, 245, 0.22);
  --form-focus-bg: #171a1f;
}

/* ==========================================================================
   LIGHT THEME (Architectural Cool Stone + Deep Vermilion)
   No pure #ffffff page background; no banned warm beige/brass palette.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg-primary: #f3f4f1;
  --bg-secondary: #e9eae5;
  --bg-surface: #fafaf8;
  --bg-surface-elevated: #e2e3dd;
  --bg-surface-tinted: #f2ebe8;
  --bg-nav: rgba(243, 244, 241, 0.90);

  /* Typography Hierarchy (WCAG AA/AAA verified) */
  --text-primary: #141619;
  --text-secondary: #434952;
  --text-muted: #5c636e;
  --text-on-accent: #fafaf8;

  /* Single Locked Accent (Deep Vermilion, 5.7:1 contrast with off-white) */
  --accent: #b8371d;
  --accent-strong: #b8371d;
  --accent-hover: #992b14;
  --accent-subtle: rgba(184, 55, 29, 0.08);
  --accent-border: rgba(184, 55, 29, 0.28);

  /* Borders & Hairlines */
  --border-subtle: rgba(20, 22, 25, 0.11);
  --border-strong: rgba(20, 22, 25, 0.20);
  --border-focus: #b8371d;

  /* Hue-Tinted Shadows (Tinted to slate-stone, never pure black) */
  --shadow-sm: 0 2px 6px rgba(20, 24, 30, 0.05);
  --shadow-md: 0 10px 26px rgba(20, 24, 30, 0.08);
  --shadow-lg: 0 20px 44px rgba(20, 24, 30, 0.11);

  /* Form Tokens (WCAG AA contrast verified) */
  --form-bg: #fafaf8;
  --form-border: rgba(20, 22, 25, 0.26);
  --form-focus-bg: #fafaf8;
}