/* Tu Legit Electric — v2 design tokens
 * Brand-tuned theme: warm-cream paper · deep-charcoal ink · golden-yellow bolt accent
 * Anchor hue ~90 (warm gold). Every colour + type referenced by token name only.
 */

:root {
  /* ---- Type families (2 + 1) ---------------------------------------------
     Display: Fraunces — headings, hero
     Body:    IBM Plex Sans — prose + UI
     Outlier: IBM Plex Mono — credential / spec data ONLY (license, hours, phone) */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Colour — OKLCH, warm-tinted neutrals, single gold accent ---------- */
  --color-paper:    oklch(97.5% 0.010 92);   /* warm cream base surface       */
  --color-paper-2:  oklch(95.2% 0.013 90);   /* raised cream                  */
  --color-paper-3:  oklch(92.4% 0.016 88);   /* card / inset                  */
  --color-rule:     oklch(86%   0.016 86);   /* hairline rules                */
  --color-rule-2:   oklch(79%   0.018 84);   /* stronger hairline             */

  --color-neutral:  oklch(58%   0.014 70);   /* secondary text                */
  --color-muted:    oklch(44%   0.014 64);   /* captions, helper text         */
  --color-ink-2:    oklch(33%   0.013 60);   /* sub-headings                  */
  --color-ink:      oklch(24%   0.012 66);   /* primary text — warm charcoal  */

  /* Dark feature bands — echo the logo background */
  --color-slate:    oklch(25.5% 0.012 250);  /* charcoal panel (logo bg)      */
  --color-slate-2:  oklch(30%   0.013 250);  /* raised charcoal               */
  --color-slate-3:  oklch(20%   0.011 250);  /* deepest charcoal              */
  --color-slate-rule: oklch(40% 0.012 250);  /* hairline on charcoal          */
  --color-on-slate: oklch(95%   0.010 92);   /* cream text on charcoal        */
  --color-on-slate-muted: oklch(74% 0.012 90);

  /* Accent — the golden-yellow bolt (#F5C518-ish) */
  --color-accent:     oklch(84%  0.165 92);  /* fills, marks, on-dark text    */
  --color-accent-2:   oklch(78%  0.160 88);  /* hover / pressed gold          */
  --color-accent-ink: oklch(44%  0.105 62);  /* deep amber for accent TEXT / icons on cream (≥4.5:1) */
  --color-focus:      oklch(52%  0.150 70);  /* focus ring — deep amber, ≥3:1 */

  /* On-gold (dark text sitting on a gold fill — like the logo bolt) */
  --color-on-accent:  oklch(22%  0.020 80);

  /* Form / status */
  --color-success:    oklch(60%  0.130 150);
  --color-success-fg: oklch(40%  0.110 150);
  --color-danger:     oklch(57%  0.170 28);
  --color-danger-fg:  oklch(50%  0.170 28);

  /* Hero / media overlays — keep photo text legible */
  --overlay-hero:   linear-gradient(180deg, oklch(20% 0.011 250 / 0.30) 0%, oklch(20% 0.011 250 / 0.55) 45%, oklch(18% 0.011 250 / 0.86) 100%);
  --overlay-card:   linear-gradient(180deg, transparent 30%, oklch(20% 0.011 250 / 0.88) 100%);
  --media-fallback: linear-gradient(135deg, var(--color-slate-3), var(--color-slate-2) 55%, oklch(34% 0.04 250) 100%);

  /* Translucent surfaces — glass nav + on-dark scrims (so styles never inline raw alpha) */
  --glass-paper:        oklch(97.5% 0.010 92 / 0.78);
  --glass-paper-strong: oklch(97.5% 0.010 92 / 0.92);
  --line-on-dark:       oklch(100% 0 0 / 0.18);
  --line-on-dark-2:     oklch(100% 0 0 / 0.30);
  --fill-on-dark:       oklch(100% 0 0 / 0.10);
  --fill-on-dark-15:    oklch(100% 0 0 / 0.15);
  --scrim-card:         oklch(20% 0.011 250 / 0.55);
  --scrim-chip:         oklch(20% 0.011 250 / 0.60);
  --accent-glow:        oklch(84% 0.165 92 / 0.30);
  --accent-tint:        oklch(84% 0.165 92 / 0.22);
  --accent-ring-0:      oklch(84% 0.165 92 / 0.55);
  --accent-ring-1:      oklch(84% 0.165 92 / 0);

  /* ---- Type scale — major third (1.25) from 16px ------------------------- */
  --text-xs:   0.8rem;     /* 12.8px — labels, fine print */
  --text-sm:   0.875rem;   /* 14px   — small UI           */
  --text-base: 1rem;       /* 16px   — body               */
  --text-md:   1.25rem;    /* 20px   — lede               */
  --text-lg:   1.5625rem;  /* 25px                        */
  --text-xl:   1.953rem;   /* 31.25px                     */
  --text-2xl:  2.441rem;   /* 39px                        */
  --text-3xl:  3.052rem;   /* 48.8px                      */
  --text-display:   clamp(2.85rem, 5.2vw + 1rem, 5.6rem);
  --text-display-s: clamp(2.25rem, 3vw + 1rem, 3.4rem);

  /* ---- Spacing — 4pt scale ----------------------------------------------- */
  --space-3xs: 0.25rem;   /* 4  */
  --space-2xs: 0.5rem;    /* 8  */
  --space-xs:  0.75rem;   /* 12 */
  --space-sm:  1rem;      /* 16 */
  --space-md:  1.5rem;    /* 24 */
  --space-lg:  2.5rem;    /* 40 */
  --space-xl:  4rem;      /* 64 */
  --space-2xl: 6rem;      /* 96 */
  --space-3xl: 8.5rem;    /* 136 — major section gap */

  /* ---- Lines, radius, shadow --------------------------------------------- */
  --rule-hairline: 1px solid var(--color-rule);
  --rule-strong:   1px solid var(--color-rule-2);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(24% 0.012 66 / 0.06);
  --shadow-md: 0 14px 38px -18px oklch(24% 0.012 66 / 0.28);
  --shadow-lg: 0 30px 70px -28px oklch(20% 0.012 250 / 0.40);

  /* ---- Motion ------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-short:   170ms;
  --dur-mid:     320ms;
  --dur-long:    620ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- z-index — named scale --------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ---- Layout ------------------------------------------------------------- */
  --container: 78rem;       /* 1248px max */
  --measure: 60ch;
  --pad-inline: clamp(1.25rem, 5vw, 4rem);
}