/* ══════════════════════════════════════════════════════════
   tokens.css — the single source of design values
   Every colour, space, radius and shadow on the site resolves
   here. Nothing below this file should hard-code a hex value.

   Light is the default on :root. Dark redefines only the tokens
   that change — it is an intentional palette, not an inversion.
   ══════════════════════════════════════════════════════════ */

:root{
  /* ── brand palette, lifted from the Hazra EV mark ──
     the H is an indigo → violet → magenta ramp, the bolt is
     orange → flame, the swoosh tail is cyan. */
  --brand-indigo:  #3a1a6b;
  --brand-violet:  #7b2ff7;
  --brand-magenta: #a41fbf;
  --brand-blue:    #12a5e0;
  --brand-orange:  #f7941d;
  --brand-flame:   #f0532b;
  --brand-grad: linear-gradient(96deg,
      var(--brand-violet)  0%,
      var(--brand-magenta) 30%,
      var(--brand-flame)   66%,
      var(--brand-orange)  100%);

  /* ── surface + ink, light ──
     "-0" is the resting value; the hero canvas ramps live copies
     of these during scroll, which is why the suffix exists. */
  --ink-0:       #180f2c;
  --ink-soft-0:  #6b6480;
  --hair-0:      #e3ddec;
  --surface-0:   #faf8fd;
  --surface-rgb: 250 248 253;
  --chip-rgb:    240 235 249;

  /* aliases for elements and secondary pages */
  --ink:         var(--ink-0);
  --ink-soft:    var(--ink-soft-0);
  --hair:        var(--hair-0);
  --surface:     var(--surface-0);
  --line:        var(--hair-0);

  --accent:      var(--brand-orange);
  --accent-ink:  #180f2c;

  /* glass + veil, used by the hero and any overlay panel */
  --glass-bd: rgba(255,255,255,.28);
  --glass-bg: rgba(255,255,255,.16);
  --veil:     rgba(26,14,48,.32);
  --sh-a:     .45;               /* shadow alpha multiplier */

  /* ── spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  /* section rhythm — fluid, so 360px and 1440px both breathe */
  --sp-section: clamp(64px, 9vw, 128px);
  --gutter:     clamp(18px, 4vw, 26px);
  --measure:    min(1520px, 93vw);

  /* ── radius ── */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill:999px;

  /* ── shadows ── */
  --sh-1: 0 1px 2px rgba(24,15,44,calc(.06 * var(--sh-a) / .45));
  --sh-2: 0 6px 18px rgba(24,15,44,calc(.10 * var(--sh-a) / .45));
  --sh-3: 0 18px 48px rgba(24,15,44,calc(.16 * var(--sh-a) / .45));

  /* ── motion ── */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
}

html[data-theme="dark"]{
  --ink-0:       #f6f3fb;
  --ink-soft-0:  #9a93ad;
  --hair-0:      #2f2743;
  --surface-0:   #120e1c;
  --surface-rgb: 18 14 28;
  --chip-rgb:    33 26 50;

  --accent:      #ff8f2e;
  --accent-ink:  #150c26;

  --glass-bd: rgba(255,255,255,.16);
  --glass-bg: rgba(255,255,255,.08);
  --veil:     rgba(9,4,20,.52);
  --sh-a:     .8;

  --sh-1: 0 1px 2px rgba(0,0,0,.36);
  --sh-2: 0 6px 18px rgba(0,0,0,.48);
  --sh-3: 0 18px 48px rgba(0,0,0,.60);
}