/* =========================================================================
   CrewDispatchr — Design tokens (single source of truth)
   Two layers: (1) primitives — raw palette/scale, never used directly in
   components; (2) semantic roles — what components actually reference.
   Change a brand colour here, not in a component.
   ========================================================================= */
:root {
  /* ---- 1a. Primitives — Primary (cool slate) --------------------------- */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;

  /* ---- 1b. Primitives — Accent (amber) -------------------------------- */
  --amber-600: #b45309;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-50:  #fef3c7;

  /* ---- 1c. Primitives — Warm neutrals (stone undertone) --------------- */
  --n-0:   #ffffff;
  --n-50:  #faf9f7;
  --n-100: #f4f2ee;
  --n-200: #e7e3dc;
  --n-300: #d6d1c7;
  --n-400: #a8a196;
  --n-500: #78716c;
  --n-600: #57534e;
  --n-700: #44403c;
  --n-800: #292524;
  --n-900: #1c1917;

  /* ---- 1d. Primitives — Semantic state hues --------------------------- */
  --green-700: #15803d;  --green-50: #dcfce7;
  --yellow-700:#a16207;  --yellow-50:#fef9c3;
  --red-700:   #b91c1c;  --red-50:   #fee2e2;
  --blue-700:  #0369a1;  --blue-50:  #e0f2fe;

  /* ======================================================================
     2. Semantic roles — components reference ONLY these
     ====================================================================== */
  /* Surfaces */
  --color-bg:          var(--n-0);
  --surface:           var(--n-50);
  --surface-alt:       var(--n-100);
  --inverse-bg:        var(--slate-900);
  --inverse-surface:   #16213b;          /* raised panel on dark */

  /* Lines */
  --border:            var(--n-200);
  --border-strong:     var(--n-300);
  --border-inverse:    rgba(231,227,220,.14);

  /* Text */
  --text:              var(--n-900);
  --text-muted:        var(--n-500);
  --heading:           var(--slate-800);
  --inverse-text:      #e7e3dc;
  --inverse-muted:     #9aa6bd;

  /* Brand / interactive */
  --primary:           var(--slate-800);
  --primary-hover:     var(--slate-700);
  --on-primary:        var(--n-0);
  --accent:            var(--amber-500);
  --accent-hover:      var(--amber-600);
  --accent-soft:       var(--amber-50);
  --on-accent:         var(--n-900);      /* dark text on amber — ~8:1, distinctive */
  --accent-ink:        var(--amber-600);  /* amber as text/icon on light (AA-safe) */
  --focus-ring:        var(--amber-500);

  /* Semantic states (fg + soft bg) */
  --success: var(--green-700);  --success-soft: var(--green-50);
  --warning: var(--yellow-700); --warning-soft: var(--yellow-50);
  --danger:  var(--red-700);    --danger-soft:  var(--red-50);
  --info:    var(--blue-700);   --info-soft:    var(--blue-50);

  /* ---- 3. Typography --------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  /* fluid, restrained — h1 caps at 48, h2 at 36 */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --track-tight: -0.02em;
  --track-snug:  -0.011em;
  --track-label: 0.08em;

  /* ---- 4. Spacing — 4px base scale ------------------------------------ */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  --container: 1140px;
  --gutter: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 6rem);

  /* ---- 5. Radius & elevation — borders-over-shadows lane -------------- */
  --radius-sm: 3px;
  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* only two shadows exist, reserved for floating UI */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-overlay: 0 12px 32px -8px rgba(15,23,42,.24);

  --ease: cubic-bezier(.22,.61,.36,1);
}