/* ==========================================================================
   StreakPass design tokens — the single source of truth for all styling.
   Canonical references: the 8 streakpass-*.png comps + docs/handoff/03.
   Dark mode is the default and only v1 theme.
   ========================================================================== */
:root {
  /* ---------- color: surfaces ---------- */
  --sp-bg: #050505;
  --sp-bg-soft: #0b0b0d;
  --sp-surface: rgba(18, 18, 20, 0.82);
  --sp-surface-strong: rgba(28, 28, 31, 0.92);
  --sp-surface-raised: rgba(38, 38, 42, 0.92);
  --sp-border: rgba(255, 255, 255, 0.12);
  --sp-border-soft: rgba(255, 255, 255, 0.07);
  --sp-border-accent: rgba(255, 145, 0, 0.72);
  --sp-border-accent-soft: rgba(255, 145, 0, 0.38);

  /* ---------- color: text ---------- */
  --sp-text: #f7f7f8;
  --sp-text-muted: #b7b7bd;
  --sp-text-subtle: #77777f;
  --sp-text-on-accent: #1c0e00;   /* dark text on orange gradient buttons */

  /* ---------- color: brand & status ---------- */
  --sp-orange: #ff7a00;
  --sp-orange-bright: #ff9d2b;
  --sp-amber: #ffae18;
  --sp-gold: #ffd166;
  --sp-success: #48e15f;
  --sp-success-dim: rgba(72, 225, 95, 0.14);
  --sp-danger: #ff4d4d;
  --sp-danger-dim: rgba(255, 77, 77, 0.14);
  --sp-info: #4da3ff;
  --sp-info-dim: rgba(77, 163, 255, 0.14);

  /* ---------- gradients ---------- */
  --sp-gradient-fire: linear-gradient(135deg, #ff9d2b 0%, #ff7a00 60%, #f56700 100%);
  --sp-gradient-fire-text: linear-gradient(180deg, #ffb54d 0%, #ff7a00 100%);
  --sp-gradient-ember: linear-gradient(180deg, rgba(255, 122, 0, 0.16) 0%, rgba(255, 122, 0, 0) 100%);
  --sp-gradient-flame-track: linear-gradient(90deg, #ffae18, #ff7a00);

  /* ---------- elevation & glow ---------- */
  --sp-shadow-card: 0 22px 70px rgba(0, 0, 0, 0.45);
  --sp-shadow-sheet: 0 -18px 60px rgba(0, 0, 0, 0.6);
  --sp-glow-orange: 0 0 26px rgba(255, 122, 0, 0.36);
  --sp-glow-orange-strong: 0 0 34px rgba(255, 122, 0, 0.55);
  --sp-glow-soft: 0 0 48px rgba(255, 122, 0, 0.16);
  --sp-glow-success: 0 0 22px rgba(72, 225, 95, 0.25);
  --sp-focus-ring: 0 0 0 3px rgba(255, 174, 24, 0.55);

  /* ---------- typography ---------- */
  --sp-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --sp-fs-display: clamp(2.5rem, 8vw, 3.25rem);  /* 40-52: hero headlines */
  --sp-fs-h1: 2.125rem;    /* 34: page titles (Today's Offers) */
  --sp-fs-h2: 1.5rem;      /* 24: section titles, question prompts (mobile) */
  --sp-fs-h3: 1.25rem;     /* 20: card titles */
  --sp-fs-body: 1.0625rem; /* 17: iOS-friendly body */
  --sp-fs-sm: 0.9375rem;   /* 15: secondary copy */
  --sp-fs-caption: 0.8125rem; /* 13: captions, table meta */
  --sp-fs-micro: 0.6875rem;   /* 11: weekday headers, overlines */
  --sp-fs-stat: 3.5rem;    /* 56: big points balance */

  --sp-fw-regular: 400;
  --sp-fw-medium: 500;
  --sp-fw-semibold: 600;
  --sp-fw-bold: 700;
  --sp-fw-extrabold: 800;

  --sp-lh-tight: 1.1;
  --sp-lh-snug: 1.3;
  --sp-lh-normal: 1.5;

  --sp-ls-wide: 0.08em;    /* overlines / weekday headers */

  /* ---------- spacing (4px base) ---------- */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* ---------- radii ---------- */
  --sp-radius-xs: 8px;
  --sp-radius-sm: 10px;
  --sp-radius-md: 16px;
  --sp-radius-lg: 24px;
  --sp-radius-xl: 32px;
  --sp-radius-pill: 999px;

  /* ---------- component heights ---------- */
  --sp-h-button: 56px;
  --sp-h-button-sm: 44px;
  --sp-h-input: 52px;
  --sp-h-nav: 64px;
  --sp-h-chip: 36px;
  --sp-touch-target: 44px;  /* minimum touch target */

  /* ---------- motion ---------- */
  --sp-speed-fast: 140ms;
  --sp-speed-med: 220ms;
  --sp-speed-slow: 400ms;
  --sp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sp-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --sp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- z-index layers ---------- */
  --sp-z-nav: 100;
  --sp-z-sheet-backdrop: 200;
  --sp-z-sheet: 210;
  --sp-z-toast: 300;

  /* ---------- chart series (dashboards/admin) ---------- */
  --sp-series-1: #ff7a00;   /* primary: orange */
  --sp-series-2: #ffd166;   /* secondary: gold */
  --sp-series-3: #4da3ff;   /* tertiary: blue */
  --sp-series-4: #48e15f;   /* quaternary: success green */
  --sp-chart-grid: rgba(255, 255, 255, 0.06);

  /* ---------- admin shell ---------- */
  --sp-admin-sidebar-w: 240px;
  --sp-admin-topbar-h: 64px;

  /* ---------- page shell ---------- */
  --sp-page-max: 480px;        /* phone-focused flows */
  --sp-page-max-wide: 1080px;  /* desktop dashboard/marketing */
  --sp-page-pad: 20px;
}