/* ============================================================
   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;
  }
}