/* =========================================================================
   Juice Garage — Design Tokens
   Brand comes straight from the logo: signal orange, black, white.
   Strategy: black is the structural color (header, footer, dark bands —
   the logo lives on black), orange is the action color (every call button,
   the status bar, key highlights), a warm off-white canvas carries reading.
   Orange never sets small text on light grounds; --brand-text does that.
   ========================================================================= */
:root {
  /* ---- Brand ---- */
  --brand:       oklch(0.72 0.19 50);     /* logo orange  #FF780B              */
  --brand-deep:  oklch(0.665 0.185 47);   /* hover / pressed                   */
  --brand-soft:  oklch(0.95 0.035 60);    /* tinted panels on light            */
  --brand-ink:   oklch(0.17 0.01 55);     /* text ON orange is always dark     */
  --brand-text:  oklch(0.53 0.155 45);    /* orange-family text on light, AA   */
  --signal:      oklch(0.56 0.2 28);      /* form errors only                  */
  --ok:          oklch(0.62 0.15 150);    /* open-now dot                      */

  /* ---- Ink ramp (warm neutral, hue follows the orange) ---- */
  --ink-900: oklch(0.19 0.008 60);
  --ink-800: oklch(0.28 0.008 60);
  --ink-700: oklch(0.40 0.008 60);
  --ink-600: oklch(0.51 0.008 60);
  --ink-500: oklch(0.63 0.007 60);
  --ink-400: oklch(0.75 0.006 60);

  /* ---- Light canvas ---- */
  --bg:          oklch(0.988 0.003 80);
  --surface:     oklch(0.968 0.004 75);
  --surface-2:   oklch(0.945 0.005 75);
  --line:        oklch(0.90 0.005 75);
  --line-strong: oklch(0.83 0.006 75);

  /* ---- Dark surfaces (the logo's black) ---- */
  --dark-0:        oklch(0.125 0.005 60);   /* footer: one step below --dark    */
  --dark:          oklch(0.165 0.006 60);
  --dark-2:        oklch(0.215 0.007 60);
  --dark-3:        oklch(0.275 0.008 60);
  --on-dark:       oklch(0.975 0.004 80);
  --on-dark-muted: oklch(0.80 0.008 70);
  --line-dark:     oklch(0.33 0.008 60);

  /* ---- Semantic ---- */
  --text:       var(--ink-900);
  --text-soft:  var(--ink-800);
  --text-muted: var(--ink-700);
  --focus:      oklch(0.53 0.155 45);

  /* ---- Typography ----
     Kanit: heavy, slightly squared grotesk with a real italic — the nearest
     web face to the logo's 80s speed lettering. Barlow: DIN-flavored,
     highly legible body face with automotive signage roots. */
  --font-display: 'Kanit', 'Barlow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.20vw, 1.1875rem);
  --step-1:  clamp(1.22rem, 1.15rem + 0.34vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.80rem);
  --step-3:  clamp(1.72rem, 1.55rem + 0.88vw, 2.25rem);
  --step-4:  clamp(2.0rem, 1.76rem + 1.2vw, 2.8rem);
  --step-5:  clamp(2.35rem, 1.98rem + 1.85vw, 3.5rem);
  --step-6:  clamp(2.6rem, 2.05rem + 2.8vw, 4.4rem);

  --leading-tight: 1.06;
  --leading-body:  1.6;
  --tracking-display: -0.015em;
  --measure: 68ch;

  /* ---- Spacing ---- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.13vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.20vw, 0.94rem);
  --space-sm:  clamp(1rem, 0.95rem + 0.27vw, 1.25rem);
  --space-md:  clamp(1.50rem, 1.42rem + 0.40vw, 1.88rem);
  --space-lg:  clamp(2rem, 1.83rem + 0.82vw, 2.75rem);
  --space-xl:  clamp(3rem, 2.65rem + 1.74vw, 4.50rem);
  --space-2xl: clamp(4rem, 3.39rem + 3.04vw, 7rem);

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px oklch(0.19 0.01 60 / 0.07), 0 1px 1px oklch(0.19 0.01 60 / 0.04);
  --shadow-md: 0 6px 16px oklch(0.19 0.01 60 / 0.09), 0 2px 4px oklch(0.19 0.01 60 / 0.05);
  --shadow-lg: 0 18px 44px oklch(0.19 0.01 60 / 0.16), 0 4px 10px oklch(0.19 0.01 60 / 0.07);
  --shadow-brand: 0 8px 22px oklch(0.72 0.19 50 / 0.38);

  /* ---- Layout ---- */
  --container: 76rem;
  --container-narrow: 50rem;
  --gutter: clamp(1.1rem, 0.7rem + 2.2vw, 2.5rem);
  --header-h: 4.75rem;

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-mid:  280ms;
  --dur-slow: 620ms;

  /* ---- Z-index ---- */
  --z-header: 200;
  --z-actionbar: 250;
  --z-drawer: 400;
  --z-toast: 500;
}