/* ============================================================
   tokens.css — Design system tokens
   Tohar Auto (טוהר הרכב) — corporate landing page
   Spec §5.1.1 colour · §5.2.2 type · §5.4 space/radius/elevation · §6.2 motion
   All 🔒 brand colours are exact and must not be altered.
   ============================================================ */

:root {
  /* ── Locked brand palette (spec §5.1) ───────────────────── */
  --carbon:        #09090b;
  --slate:         #18181b;
  --amber:         #f59e0b;
  --offwhite:      #f4f4f5;
  --emerald:       #10b981;

  /* ── Derived surfaces ───────────────────────────────────── */
  --surface-0:     #09090b;   /* page                         */
  --surface-1:     #18181b;   /* card                         */
  --surface-2:     #232326;   /* card hover / raised          */
  --surface-sunk:  #050506;   /* footer, insets               */

  /* ── Derived text ───────────────────────────────────────── */
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;  /* captions, meta               */
  --text-tertiary:  #71717a;  /* legal, footnotes             */
  --text-on-amber:  #09090b;  /* NEVER white on amber (§13.2) */

  /* ── Derived borders ────────────────────────────────────── */
  --border-subtle: rgb(244 244 245 / 0.08);
  --border-strong: rgb(244 244 245 / 0.16);
  --border-amber:  rgb(245 158 11 / 0.35);

  /* ── Amber scale ────────────────────────────────────────── */
  --amber-hover:   #fbbf24;
  --amber-press:   #d97706;
  --amber-glow-08: rgb(245 158 11 / 0.08);
  --amber-glow-20: rgb(245 158 11 / 0.20);
  --amber-glow-40: rgb(245 158 11 / 0.40);

  /* ── Emerald scale ──────────────────────────────────────── */
  --emerald-hover: #34d399;
  --emerald-glow:  rgb(16 185 129 / 0.35);

  /* ── Semantic ───────────────────────────────────────────── */
  --focus-ring:    #f59e0b;
  --error:         #f87171;
  --success:       #10b981;

  /* ── The one allowed gradient — hero scrim (§5.1.2) ─────── */
  --hero-scrim: linear-gradient(
    to top,
    var(--carbon)          0%,
    rgb(9 9 11 / 0.92)    38%,
    rgb(9 9 11 / 0.68)    70%,
    rgb(9 9 11 / 0.45)   100%
  );

  /* ── Typography (§5.2.2) ────────────────────────────────── */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.5rem,  8vw + 0.5rem, 5.5rem);       /* Hero H1        */
  --fs-h2:      clamp(1.75rem, 4vw + 0.5rem, 3rem);         /* Section titles */
  --fs-h3:      clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);   /* Card titles    */
  --fs-lead:    clamp(1.0625rem, 1vw + 0.75rem, 1.375rem);  /* Hero sub       */
  --fs-body:    clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-display: 1.02;
  --lh-h2:      1.12;
  --lh-h3:      1.3;
  --lh-body:    1.75;   /* Hebrew needs generous leading (§8.4) */
  --lh-small:   1.6;

  --ls-display: -0.02em;
  --ls-h2:      -0.01em;
  --ls-body:     0;
  --ls-eyebrow:  0.14em;  /* ONLY for Latin/numeric eyebrows */

  /* ── Spacing — 4px base grid (§5.4) ─────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(var(--sp-16), 10vw, var(--sp-32));
  --gutter:    clamp(var(--sp-4), 5vw, var(--sp-8));
  --measure:   72rem;

  /* ── Radius (§5.4) ──────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Elevation — border/background driven (§5.4) ────────── */
  --shadow-float:   0 8px 32px rgb(0 0 0 / 0.5);
  --shadow-amber:   0 8px 28px var(--amber-glow-40);
  --shadow-emerald: 0 6px 24px var(--emerald-glow);

  /* ── Motion: duration (§6.2) ────────────────────────────── */
  --d-instant: 100ms;
  --d-fast:    180ms;
  --d-base:    320ms;
  --d-slow:    620ms;
  --d-slower:  900ms;
  --d-epic:   1400ms;
  --d-ambient:      6s;   /* slow idle loops — badge glow, particles */
  --d-ambient-slow: 14s;  /* sheen sweep, particle drift */

  /* ── Motion: easing (§6.2) ──────────────────────────────── */
  --e-enter:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-exit:   cubic-bezier(0.7, 0, 0.84, 0);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-linear: linear;

  /* ── Tilt / ambient interaction (added — hero badge, cards) ─ */
  --tilt-max:       9deg;
  --spotlight-size: 46vmax;

  /* ── Sticky header (added) ──────────────────────────────── */
  --header-h: 72px;

  /* ── Hero always sits on a dark photo scrim, so its text stays
       fixed regardless of the light/dark theme toggle ────────── */
  --hero-text-primary:   #f4f4f5;
  --hero-text-secondary: #a1a1aa;
  --hero-border-strong:  rgb(244 244 245 / 0.16);

  /* ── Sticky header glass panel (theme-aware) ────────────── */
  --header-bg: rgb(9 9 11 / 0.72);

  /* ── Motion: stagger / distance (§6.2) ──────────────────── */
  --stagger:  90ms;
  --travel-y: 28px;
  --travel-x: 20px;
  --lift:     -4px;
  --scale-in: 0.96;

  /* ── Direction multiplier for logical motion (§8.5) ─────── */
  --dir: 1;
}

[dir="rtl"] { --dir: -1; }

/* ══ Light theme — same locked palette, roles flipped (added) ══
   Brand colours (carbon/slate/amber/offwhite/emerald) are never
   redefined here — only which token points to which one. */
[data-theme="light"] {
  --surface-0:     #f7f7f8;
  --surface-1:     #ffffff;
  --surface-2:     #f4f4f5;
  --surface-sunk:  #ececee;

  --text-primary:   #09090b;
  --text-secondary: #52525b;
  --text-tertiary:  #71717a;

  --border-subtle: rgb(9 9 11 / 0.08);
  --border-strong: rgb(9 9 11 / 0.14);
  --border-amber:  rgb(245 158 11 / 0.4);

  --shadow-float:   0 8px 32px rgb(9 9 11 / 0.16);
  --shadow-amber:   0 8px 28px var(--amber-glow-40);
  --shadow-emerald: 0 6px 24px var(--emerald-glow);

  --header-bg: rgb(255 255 255 / 0.78);
}