/* =============================================================
   EIVY DESIGN SYSTEM — tokens
   Change a value here, it changes everywhere.
   ============================================================= */
:root {
  /* ---- Color (exact brand palette) ----
     peri   → page surface, cards, negative space
     mag    → ACTION ONLY: CTAs, play, active state. Never text on peri.
     blue   → large feature blocks, periwinkle text on top
     velvet → license section, secondary surfaces
     ink    → text, borders, hard shadows                         */
  --peri: #E3D9FC;
  --mag: #BF40FA;
  --blue: #4928C2;
  --velvet: #5B2A62;
  --ink: #040607;
  --bg: var(--peri);
  --fg: var(--ink);

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* wordmark, titles, prices */
  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* real metadata only */
  --t-mega: clamp(5rem, 22vw, 21rem);
  --t-xl: clamp(2.8rem, 8vw, 7rem);
  --t-l: clamp(2rem, 4vw, 3.25rem);
  --t-m: clamp(1.3rem, 2vw, 1.6rem);
  --t-body: 1.0625rem;
  --t-s: .9375rem;
  --t-meta: .75rem;
  --wonk: "WONK" 1, "SOFT" 0, "opsz" 144;

  /* ---- Space: 4px base ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);
  --maxw: 1320px;

  /* ---- Borders ---- */
  --bw-1: 2px;   /* chips, inner rules */
  --bw-2: 3px;   /* cards, buttons, windows */

  /* ---- Hard shadows (never blurred) ---- */
  --sh-1: 3px 3px 0 var(--ink);    /* buttons */
  --sh-2: 6px 6px 0 var(--ink);    /* cards */
  --sh-3: 10px 10px 0 var(--ink);  /* windows, hero objects */

  /* ---- Shape ---- */
  --r-win: 6px;      /* retro-OS windows only; everything else is square */

  /* ---- Interaction ---- */
  --tap: 52px;       /* min height for primary touch targets */
  --ease: cubic-bezier(.3, .7, .3, 1);

  /* ---- Breakpoints (reference) ----
     sm ≤ 560px · md ≤ 860px · lg ≤ 1100px                         */

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #2A1230; --fg: var(--peri); }
}
:root[data-theme="dark"] { --bg: #2A1230; --fg: var(--peri); }