/*
 * Design tokens — the single source of truth for the visual system.
 *
 * Every colour, size and radius used anywhere is declared here. Components
 * reference tokens, never literals, so a palette change is one edit and a dark
 * mode is a second :root block rather than a rewrite.
 */
:root {
  /* ---- colour ---- */
  --hero-bg:        #2c1b4e;
  --hero-ink:       #ffffff;

  --ink:            #0f0e11;
  --ink-2:          #46464c;
  --muted:          #6b6b70;
  --line:           #e7e7ea;
  --surface:        #f4f4f5;
  --surface-2:      #fafafb;
  --page:           #ffffff;

  --link:           #1e4fd8;
  --cta:            #17120e;
  --cta-ink:        #ffffff;

  --sale-bg:        #ffd9e6;
  --sale-ink:       #b0004e;
  --watch-bg:       #d9f5c4;
  --watch-ink:      #2c5a16;
  --pop-bg:         #e6deff;
  --pop-ink:        #4b2fa8;
  --ok-bg:          #e8f6ec;
  --ok-ink:         #1c6b34;

  --chart-line:     #7c5ce0;
  --chart-fill:     #efeafb;

  /* ---- type ---- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:   clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  --fs-h1:     clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --fs-h2:     1.375rem;
  --fs-lg:     1.125rem;
  --fs-base:   0.9375rem;
  --fs-sm:     0.8125rem;
  --fs-xs:     0.75rem;

  /* ---- space ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- shape ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 14, 17, .04);
  --shadow-pop:  0 8px 28px rgba(15, 14, 17, .12);

  --container: 1280px;
  --nav-h: 64px;
}