/* ============================================================
   AllTheMuse — Design Tokens
   Loaded FIRST in every page: <link> order is
   tokens.css → styles.css → assets/app.css → components.css
   Dark overrides use html[data-theme="dark"] so they win over
   any legacy :root block regardless of order.
   ============================================================ */

:root {
  /* ---- Legacy surface + text tokens (kept so old pages work) ---- */
  --bg: #fbfbfd;
  --bg-soft: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --line: #e8e8ed;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #a1a1a6;

  /* ---- Brand accents ---- */
  --amber: #e8930c;
  --amber-ink: #7a4d05;
  --amber-soft: #fdf3e0;
  --green-soft: #e5f6ea;
  --green-ink: #1d7a3a;

  /* Purple accent family (new) */
  --purple: #7c5cff;
  --purple-deep: #5b3df5;
  --purple-ink: #4a2ed6;
  --purple-soft: #efebff;
  --purple-glow: rgba(124, 92, 255, 0.22);

  /* Glassmorphism (new) */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(18px) saturate(1.6);

  /* CTA + type */
  --cta: #1d1d1f;
  --on-cta: #ffffff;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.10);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Radius scale ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* ---- Shadow scale ---- */
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --sh-md: 0 8px 30px rgba(0, 0, 0, 0.06);
  --sh-lg: 0 18px 60px rgba(0, 0, 0, 0.10);
  --sh-xl: 0 30px 90px rgba(0, 0, 0, 0.16);
  --sh-purple: 0 12px 34px rgba(124, 92, 255, 0.30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.25);
  --focus-ring: 0 0 0 3px rgba(124, 92, 255, 0.38);

  /* ---- Rarity badge palette ---- */
  --rarity-common-bg: #eef0f3;
  --rarity-common-ink: #5b5f66;
  --rarity-rare-bg: #e3f0ff;
  --rarity-rare-ink: #1c5fb8;
  --rarity-epic-bg: #efebff;
  --rarity-epic-ink: #5b3df5;
  --rarity-legendary-bg: #fdf3e0;
  --rarity-legendary-ink: #8a5600;
  --rarity-legendary-glow: 0 0 0 1px rgba(232, 147, 12, 0.35), 0 4px 16px rgba(232, 147, 12, 0.25);

  /* ---- Skeleton shimmer ---- */
  --skel-base: #eef0f3;
  --skel-hi: #f7f8fa;
}

/* ============================================================
   DARK THEME — html[data-theme="dark"]
   ============================================================ */
html[data-theme="dark"] {
  --bg: #0b0b0e;
  --bg-soft: #121217;
  --surface: #16161c;
  --surface-2: #1c1c24;
  --line: #26262e;
  --ink: #f5f5f7;
  --muted: #b0b0b8;
  --faint: #7a7a84;

  --amber: #f0a832;
  --amber-ink: #ffd68a;
  --amber-soft: #2b2110;
  --green-soft: #12291a;
  --green-ink: #4ade80;

  --purple: #9b85ff;
  --purple-deep: #7c5cff;
  --purple-ink: #c9bfff;
  --purple-soft: #1e1a33;
  --purple-glow: rgba(124, 92, 255, 0.34);

  --glass: rgba(18, 18, 24, 0.68);
  --glass-border: rgba(255, 255, 255, 0.09);

  --cta: #f5f5f7;
  --on-cta: #101014;

  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.55);
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 18px 60px rgba(0, 0, 0, 0.5);
  --sh-xl: 0 30px 90px rgba(0, 0, 0, 0.6);
  --sh-purple: 0 12px 34px rgba(124, 92, 255, 0.38);

  --rarity-common-bg: #23232b;
  --rarity-common-ink: #b0b0b8;
  --rarity-rare-bg: #16273f;
  --rarity-rare-ink: #7fb4ff;
  --rarity-epic-bg: #211d3d;
  --rarity-epic-ink: #c9bfff;
  --rarity-legendary-bg: #2b2110;
  --rarity-legendary-ink: #ffcf7d;

  --skel-base: #1e1e26;
  --skel-hi: #2a2a34;
}

/* Reduce glass cost + motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: linear;
    --ease-spring: linear;
  }
}

/* ============================================================
   PREMIUM TOKENS (track 7) — 2026-10-11
   Additive only: nothing above is renamed or removed, and every
   page keeps rendering exactly as before. These tokens COMPLETE
   the system so new work speaks one language.

   HOW TO USE
   - Spacing:  pick from --sp-*, never invent one-off rems.
   - Radius:   snap to the nearest --r-* step when touching a rule.
               r-sm controls/inputs · r-md inner elements ·
               r-lg panels · r-xl cards · r-2xl feature cards ·
               r-pill pills/avatars/progress.
   - Elevation: RESTING --sh-sm → HOVER --sh-md/--sh-lg → OVERLAY
               --sh-lg/--sh-xl. Never invent a shadow.
   - Type:     --text-* for size, --track-* for letter-spacing,
               tabular numerals on every count/stat.
   - Z-index: follow --z-* stacking; nothing above --z-fx.
   - States:   --danger* for errors, --green-* for success,
               --love for hearts/votes, --live for live dots.
   NOTE: the purple family above (#7c5cff…) is the ADMIN truth —
   admin/ loads tokens.css with no other palette file. Every public
   page overrides purple to #7C6CF0 via styles.css/home.css, which
   load later. Do not "fix" the values here; the admin page depends
   on them.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base unit, rem for zoom) ---- */
  --sp-1: 0.25rem;    /* 4px  — hairline gaps, icon nudges */
  --sp-2: 0.5rem;     /* 8px  — tight gaps, chip padding-y */
  --sp-3: 0.75rem;    /* 12px — card padding, row gaps */
  --sp-4: 1rem;       /* 16px — standard gap */
  --sp-5: 1.25rem;    /* 20px — card body padding-x */
  --sp-6: 1.5rem;     /* 24px — container padding-x */
  --sp-8: 2rem;       /* 32px — large card padding */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px — section rhythm */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px — hero rhythm */

  /* ---- Elevation: the missing inset step ----
     (shadow scale --sh-sm…--sh-xl lives above, unchanged) */
  --sh-inner: inset 0 2px 8px rgba(0, 0, 0, 0.06);
  /* Legacy aliases: --shadow == --sh-md, --shadow-lg == --sh-lg.
     Kept forever; prefer --sh-* in new code. */

  /* ---- Type scale ----
     Display sizes stay tight-tracked; labels stay uppercase. */
  --text-caption: 0.78rem;   /* eyebrows, meta labels (uppercase + tracked) */
  --text-small: 0.85rem;     /* hints, secondary text */
  --text-body: 0.95rem;      /* UI body copy */
  --text-lead: 1.08rem;      /* section subs, standfirsts */
  --text-h4: 1.15rem;
  --text-h3: 1.35rem;
  --text-h2: clamp(1.9rem, 4vw, 2.7rem);
  --text-hero: clamp(3rem, 8vw, 5.4rem);
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --track-display: -0.03em;  /* hero / h1 */
  --track-head: -0.02em;     /* h2 / h3 */
  --track-label: 0.08em;     /* uppercase labels */
  --track-kicker: 0.14em;    /* kickers */

  /* ---- Z-index scale: one stacking story ----
     chrome < sticky bars < sheets < menus < modals < toasts < celebration < fx */
  --z-sticky-bar: 60;
  --z-sheet: 190;
  --z-nav: 200;
  --z-menu: 210;
  --z-modal: 400;
  --z-toast: 500;
  --z-celebrate: 900;
  --z-fx: 9999;

  /* ---- State colors ----
     --green-soft/--green-ink (above) remain the success pair.
     Danger had no tokens — it does now. */
  --danger: #d70015;
  --danger-soft: #fdeef0;
  --danger-border: #f3b7c1;
  --love: #c2255c;
  --live: #30d158;
}

html[data-theme="dark"] {
  --sh-inner: inset 0 2px 8px rgba(0, 0, 0, 0.35);
  --danger: #ff6b7a;
  --danger-soft: #2b1418;
  --danger-border: #5c2b33;
  --love: #ff6b9d;
  --live: #30d158;
}