/* ============================================================================
   LUMEN - Fleet Design System  ·  tokens.css
   Shared UI foundation for the REAL MikroKönyv + QuickQuote builds.
   Light-first, finance-trust. Zero-dependency CSS custom properties.

   Inspiration synthesis: Stripe (restraint + trust + typography),
   Linear (crispness + purposeful motion), Vercel (geometric minimalism),
   Raycast (micro-interaction polish); category: Hnry/Coconut/Billingo,
   Jobber/Joist. All color pairs below are checked to WCAG AA; re-run a
   contrast check at build time if you change a value.
   ============================================================================ */

:root {
  /* ---- Neutral ramp (cool gray) -------------------------------------------
     Surfaces, text, borders. The backbone of a calm finance UI. */
  --gray-0:   #ffffff;
  --gray-50:  #f7f9fb;   /* app background */
  --gray-100: #eef2f6;   /* sunken / subtle fill */
  --gray-200: #e2e8f0;   /* hairline / decorative border */
  --gray-300: #cbd5e1;   /* default border */
  --gray-400: #94a3b8;   /* placeholder (NOT for control borders, < 3:1) */
  --gray-500: #64748b;   /* muted text - 4.8:1 on white (AA) */
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;   /* primary text - ~17:1 on white */

  /* ---- Brand (trust blue) -------------------------------------------------- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;   /* primary - white text 5.17:1 (AA) */
  --blue-700: #1d4ed8;   /* primary hover/active */
  --blue-800: #1e40af;

  /* ---- Semantic ----------------------------------------------------------- */
  --green-50:  #ecfdf5;
  --green-600: #16a34a;  /* success accent (fills / badge w/ dark text) */
  --green-700: #15803d;  /* success text/solid - 4.7:1 on white */
  --amber-50:  #fffbeb;
  --amber-500: #f59e0b;  /* warning - FILL ONLY, never as text on light */
  --amber-700: #b45309;  /* warning text - 4.6:1 on white */
  --red-50:    #fef2f2;
  --red-600:   #dc2626;  /* danger text/border - 4.5:1 on white */
  --red-700:   #b91c1c;  /* danger solid (white text) */

  /* ---- Semantic role aliases (use THESE in components, not raw ramps) ------ */
  --color-bg:            var(--gray-50);
  --color-surface:       var(--gray-0);
  --color-surface-sunken:var(--gray-100);
  --color-surface-warm:  #fbfaf7;   /* v1.1 optional editorial/warm surface (calm finance) */
  --color-text:          var(--gray-900);
  --color-text-muted:    var(--gray-500);
  --color-text-on-brand: #ffffff;
  --color-border:        var(--gray-300);       /* decorative */
  --color-border-strong: #7d8b9a;               /* interactive controls - 3.48:1 on white (WCAG 1.4.11) */
  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-tint:  var(--blue-50);
  --color-focus:         var(--blue-600);
  --color-success:       var(--green-700);
  --color-success-tint:  var(--green-50);
  --color-warning:       var(--amber-700);
  --color-warning-fill:  var(--amber-500);
  --color-warning-tint:  var(--amber-50);
  --color-danger:        var(--red-600);
  --color-danger-tint:   var(--red-50);
  /* Money semantics (research: NEVER blood-red for amounts; "owed" stays calm,
     not an alarm - the value is stress-reduction). */
  --color-money:         var(--color-text);   /* amounts render as calm text */
  --color-money-down:    var(--gray-600);      /* amount owed / negative - restrained, NOT --color-danger */
  --color-money-up:      var(--green-700);     /* positive / saved */

  /* ---- Per-product accent (override at app root) ---------------------------
     MikroKönyv: trust-blue primary (finance). QuickQuote: same base, accent
     can shift to a warmer action tone. Override --color-accent per app. */
  --color-accent: var(--blue-600);

  /* ---- Typography --------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Editorial display serif (v1.1, research pillar 5: calm/editorial lean for trust).
     Use ONLY for display headings / hero / explanatory prose - NEVER for data,
     forms, or numbers (those stay --font-sans for clarity + tabular-nums). */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-xs:   0.75rem;    /* 12 - meta, captions */
  --fs-sm:   0.875rem;   /* 14 - secondary */
  --fs-base: 1rem;       /* 16 - body (mobile-safe, no zoom on iOS) */
  --fs-md:   1.125rem;   /* 18 - lead */
  --fs-lg:   1.25rem;    /* 20 - h3 */
  --fs-xl:   1.5rem;     /* 24 - h2 */
  --fs-2xl:  1.875rem;   /* 30 - h1 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-display: clamp(2.25rem, 5vw, 3.25rem); /* hero numbers / landing */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing (4px grid) ------------------------------------------------- */
  --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 */

  /* ---- Radius ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---- Elevation (subtle, layered - finance restraint, not heavy) -------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;   /* taps, toggles */
  --dur-base: 200ms;   /* most transitions */
  --dur-slow: 320ms;   /* enter/exit, reveals */

  /* ---- Sizing / touch ----------------------------------------------------- */
  --control-h:    44px;  /* inputs, secondary buttons (WCAG 2.2 comfortable) */
  --control-h-lg: 52px;  /* primary / thumb-zone CTA */
  --touch-min:    44px;
  --container:    1080px;
  --container-narrow: 720px;

  --z-header: 50;
  --z-sticky: 40;
  --z-tooltip: 60;     /* passive help: above header, below modal */
  --z-coachmark: 90;   /* feature-discovery nudge: NEVER above a real modal */
  --z-modal:  100;
  --z-toast:  120;
}

/* Optional dark theme hook (NOT default; MikroKönyv is light per Istvan).
   Kept as a seam so a future dark surface can re-map role aliases only. */
[data-theme="dark"] {
  --color-bg:            #0f1419;
  --color-surface:       #1a212b;
  --color-surface-sunken:#222b38;
  --color-text:          #e7edf3;
  --color-text-muted:    #9bb0c3;
  --color-border:        #2c3848;
  --color-border-strong: #5a6b7d;  /* 3:1+ on the dark field */
  --color-primary-tint:  rgba(59, 130, 246, 0.14);
  --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}