/* ============================================================
   Design tokens — single source for the whole film.
   Mirrors hero-demo/src/styles/tokens.css: a warm off-white app
   surface, near-black ink, one indigo accent on primary actions,
   a muted green for positive signals. The PRODUCT's visual
   language, not an invented one.
   ============================================================ */

/* Border-box everywhere. Load-bearing: the panels declare an explicit
   width AND horizontal padding, so under content-box they render wider
   than the app window and their right edge clips out of frame. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --hpd-paper: #faf9f5;
  --hpd-surface: #ffffff;
  --hpd-ink: #1b1a19;
  --hpd-ink-soft: #6b6862;
  --hpd-ink-faint: #9c988f;
  --hpd-line: #eae7de;
  --hpd-line-strong: #dcd8cc;

  --hpd-accent: #5947e8;
  --hpd-accent-ink: #ffffff;
  --hpd-accent-soft: #edebfd;

  --hpd-good: #1e7f4f;
  --hpd-good-soft: #e4f3ea;
  --hpd-bad: #b8433a;
  --hpd-bad-soft: #f7e8e6;
  --hpd-warn: #9a6516;
  --hpd-warn-soft: #f8f0dc;

  --hpd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --hpd-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;

  --hpd-radius-window: 20px;
  --hpd-radius-card: 12px;
  --hpd-radius-pill: 100px;

  /* Layered shadows — one system, used at three depths. */
  --hpd-shadow-window: 0 30px 80px -20px rgba(27, 26, 25, 0.28),
    0 10px 30px -12px rgba(27, 26, 25, 0.18);
  --hpd-shadow-card: 0 1px 2px rgba(27, 26, 25, 0.04),
    0 6px 16px -8px rgba(27, 26, 25, 0.12);
  --hpd-shadow-panel: 0 24px 70px -18px rgba(27, 26, 25, 0.26),
    0 6px 20px -10px rgba(27, 26, 25, 0.14);

  /* Chart series. The owned brand carries the product accent. */
  --s0: #5947e8;  /* Ather Energy (owned) */
  --s1: #2f8f63;  /* Ola Electric        */
  --s2: #3d9aa8;  /* TVS Motor           */
  --s3: #c2478e;  /* Bajaj Auto          */
  --s4: #d1743a;  /* Hero Electric       */
  --s5: #8aa8d8;  /* River               */
}