/* ============================================================
   GO DETAILING — DESIGN TOKENS (v16)
   Three-layer architecture: primitive → semantic → component
   Imported after wireframe.css to upgrade visual layer.
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────
     LAYER 1 — PRIMITIVE TOKENS (raw values)
     ───────────────────────────────────────────── */

  /* Carbon scale (cool near-black) */
  --carbon-50:  #F6F7F9;
  --carbon-100: #ECEEF2;
  --carbon-200: #D8DCE3;
  --carbon-300: #B5BCC7;
  --carbon-400: #8A93A1;
  --carbon-500: #5C6470;     /* Slate */
  --carbon-600: #3D4450;
  --carbon-700: #262A33;
  --carbon-800: #1A1F26;     /* Ink */
  --carbon-900: #0F1115;     /* Carbon (root brand near-black) */
  --carbon-950: #07090C;

  /* Showroom warm neutrals */
  --showroom-50:  #FFFEFB;
  --showroom-100: #FAF8F4;   /* Showroom (base bg) */
  --showroom-200: #F2EFE8;
  --showroom-300: #E8E3D8;

  /* Cool neutrals (steam family) */
  --mist-50:  #F4F7FA;
  --mist-100: #E8EEF2;       /* Mist */
  --mist-200: #D8E3EC;       /* Steam */
  --mist-300: #B9C8D5;

  /* Brand red (signature) */
  --red-50:  #FFF1F2;
  --red-100: #FFE0E2;
  --red-300: #FF8088;
  --red-500: #E60012;        /* Brand Red */
  --red-600: #C8000F;
  --red-700: #B8000E;
  --red-800: #8A0009;

  /* Functional */
  --green-500: #16A34A;
  --green-50:  #ECFDF3;
  --amber-500: #F59E0B;
  --amber-50:  #FFFBEB;
  --blue-500:  #2563EB;
  --blue-50:   #EFF6FF;

  /* ─────────────────────────────────────────────
     LAYER 2 — SEMANTIC TOKENS (purpose aliases)
     ───────────────────────────────────────────── */

  /* Surfaces */
  --surface-base:        var(--showroom-100);
  --surface-raised:      #FFFFFF;
  --surface-sunken:      var(--showroom-200);
  --surface-inverse:     var(--carbon-900);
  --surface-inverse-soft:var(--carbon-800);

  /* Text */
  --text-primary:    var(--carbon-900);
  --text-secondary:  var(--carbon-600);
  --text-muted:      var(--carbon-500);
  --text-inverse:    #FFFFFF;
  --text-inverse-muted: rgba(255,255,255,.72);
  --text-on-brand:   #FFFFFF;

  /* Borders / dividers */
  --border-subtle:   rgba(15,17,21,.06);
  --border-default:  rgba(15,17,21,.12);
  --border-strong:   rgba(15,17,21,.22);
  --border-inverse-subtle: rgba(255,255,255,.08);
  --border-inverse-default: rgba(255,255,255,.16);

  /* Brand */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-active:   var(--red-700);
  --brand-soft:     var(--red-50);
  --brand-on:       #FFFFFF;

  /* Accent — cool tech blue from steam family */
  --accent:         #2A6BB8;
  --accent-soft:    var(--mist-100);

  /* Status */
  --success:        var(--green-500);
  --success-soft:   var(--green-50);
  --warning:        var(--amber-500);
  --warning-soft:   var(--amber-50);
  --info:           var(--blue-500);
  --info-soft:      var(--blue-50);
  --danger:         var(--red-500);
  --danger-soft:    var(--red-50);

  /* Elevation tiers — refined warm shadows */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15,17,21,.05), 0 1px 1px rgba(15,17,21,.04);
  --elev-2: 0 2px 8px rgba(15,17,21,.06), 0 2px 4px rgba(15,17,21,.04);
  --elev-3: 0 8px 24px rgba(15,17,21,.08), 0 4px 8px rgba(15,17,21,.05);
  --elev-4: 0 16px 48px rgba(15,17,21,.12), 0 8px 16px rgba(15,17,21,.06);
  --elev-5: 0 24px 64px rgba(15,17,21,.18), 0 12px 24px rgba(15,17,21,.08);

  /* Inner / inset */
  --inset-soft: inset 0 1px 0 rgba(255,255,255,.6);
  --inset-dark: inset 0 1px 0 rgba(255,255,255,.04);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(230,0,18,.32);
  --focus-ring-dark: 0 0 0 3px rgba(255,255,255,.32);

  /* Radius scale — friendly rounded */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Spacing scale (4pt) — extends wireframe.css */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Type scale */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;
  --fs-72: 72px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.8;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-tighter: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-slower: 480ms;

  /* Container */
  --container-narrow: 880px;
  --container: 1200px;
  --container-wide: 1320px;

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 30;
  --z-overlay: 50;
  --z-modal: 80;
  --z-toast: 100;

  /* ─────────────────────────────────────────────
     LAYER 3 — COMPONENT TOKENS
     ───────────────────────────────────────────── */

  /* Buttons */
  --btn-radius: var(--radius-pill);
  --btn-padding-y: 14px;
  --btn-padding-x: 26px;
  --btn-font-size: var(--fs-15);
  --btn-font-weight: 600;
  --btn-shadow: var(--elev-1);
  --btn-shadow-hover: var(--elev-2);

  --btn-primary-bg: var(--brand);
  --btn-primary-bg-hover: var(--brand-hover);
  --btn-primary-fg: var(--brand-on);

  --btn-dark-bg: var(--carbon-900);
  --btn-dark-bg-hover: var(--carbon-800);
  --btn-dark-fg: #FFFFFF;

  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--text-primary);
  --btn-ghost-border: var(--border-default);
  --btn-ghost-bg-hover: var(--carbon-50);

  /* Cards */
  --card-bg: var(--surface-raised);
  --card-bg-inverse: var(--surface-inverse-soft);
  --card-border: 1px solid var(--border-subtle);
  --card-border-inverse: 1px solid var(--border-inverse-subtle);
  --card-radius: var(--radius-lg);
  --card-radius-lg: var(--radius-xl);
  --card-padding: var(--space-7);
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-3);

  /* Inputs */
  --input-bg: #FFFFFF;
  --input-border: var(--border-default);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--brand);
  --input-radius: var(--radius-md);
  --input-padding-y: 13px;
  --input-padding-x: 16px;
  --input-font-size: var(--fs-15);

  /* Chips / pills */
  --chip-bg: var(--surface-raised);
  --chip-bg-active: var(--carbon-900);
  --chip-fg: var(--text-primary);
  --chip-fg-active: #FFFFFF;
  --chip-border: 1px solid var(--border-default);
  --chip-radius: var(--radius-pill);

  /* Nav */
  --nav-bg: rgba(255,255,255,.85);
  --nav-blur: saturate(180%) blur(14px);
  --nav-border: 1px solid var(--border-subtle);
  --nav-link-color: var(--text-secondary);
  --nav-link-color-hover: var(--text-primary);
  --nav-link-active-bg: var(--carbon-50);

  /* Section padding rhythm */
  --section-py: var(--space-12);
  --section-py-sm: var(--space-10);

  /* Hero overlay */
  --hero-overlay: linear-gradient(180deg, rgba(7,9,12,.18) 0%, rgba(7,9,12,.55) 60%, rgba(7,9,12,.85) 100%);
}

/* ─────────────────────────────────────────────
   PREFERS-REDUCED-MOTION OVERRIDES
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}