/* =========================================================
   tokens.css — design tokens for both themes
   Monochrome editorial (KAMI RAINE reference):
   emphasis via size / weight / opacity — never hue.
   light : clean paper white, near-black ink
   dark  : near-black studio, off-white ink
   ========================================================= */
:root {
  --font-body: "Inter", "Noto Sans Thai", sans-serif;
  --font-disp: "Archivo", "Inter", "Noto Sans Thai", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Thai", monospace;
  --radius: 2px;
  --nav-h: 64px;

  /* ---- global scale & layout metrics ---- */
  --zoom: 1.25;                          /* desktop visual scale — drives html { zoom } */
  --vph: calc(100vh / var(--zoom));      /* true visual viewport height: zoom multiplies vh units,
                                            so any 100vh-based sizing must divide by --zoom */
  --player-clear: 140px;                 /* clearance for the fixed player bar: 85px bar
                                            + 44px equalizer strip (it grows upward while
                                            playing) + breathing room, so the footer is
                                            always reachable by scrolling */
  --page-top: calc(var(--nav-h) + 8px);  /* .tabpage padding under the fixed nav */
  --marquee-h: 54px;                     /* home genre-marquee allowance below the hero */
}

/* tablet/mobile: drop the zoom so layout width, breakpoints and
   touch targets match the real device viewport */
@media (max-width: 1024px) {
  :root { --zoom: 1; }
}

/* ---------- DARK (near-black studio) ---------- */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg2: #0d0d0e;
  --surface: #131315;
  --surface2: #1a1a1d;
  --ink: #f0f0f0;
  --ink-strong: #ffffff;
  --muted: #a1a1aa;
  --faint: #71717a;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.20);
  --accent: #f0f0f0;          /* monochrome accent = ink itself */
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(240, 240, 240, 0.08);
  --grad: var(--ink);          /* legacy .grad usages → solid ink */
  --ray-rgb: 255, 255, 255;    /* ray burst color */
  --grid: rgba(255, 255, 255, 0.045);
  --particle: rgba(240, 240, 240, 0.5);
  --nav-bg: rgba(10, 10, 10, 0.8);
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  --noise-op: 0.5;
  --glow: none;
  /* pricing "popular" tag — deliberate yellow accent, the one departure
     from the monochrome palette. The .pack.pop card inverts (bg = --ink),
     so the tag needs an inverted pair too. */
  --tag-bg: #facc15;       /* bright yellow chip on dark cards */
  --tag-ink: #111111;
  --tag-pop-bg: #a16207;   /* goldenrod on the light (inverted) pop card */
  --tag-pop-ink: #fffbeb;
}

/* ---------- LIGHT (soft paper #F3F3F3) ---------- */
[data-theme="light"] {
  --bg: #F3F3F3;
  --bg2: #ececec;
  --surface: #ffffff;
  --surface2: #e9e9e9;
  --ink: #1a1a1a;
  --ink-strong: #000000;
  --muted: #52525b;
  --faint: #a1a1aa;
  --line: rgba(0, 0, 0, 0.09);
  --line2: rgba(0, 0, 0, 0.24);
  --accent: #18181b;
  --accent-ink: #ffffff;
  --accent-soft: rgba(24, 24, 27, 0.06);
  --grad: var(--ink);
  --ray-rgb: 0, 0, 0;
  --grid: rgba(0, 0, 0, 0.05);
  --particle: rgba(26, 26, 26, 0.4);
  --nav-bg: rgba(250, 249, 246, 0.88);
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.22);
  --noise-op: 0.35;
  --glow: none;
  /* pricing "popular" tag — see dark-theme note */
  --tag-bg: #a16207;       /* goldenrod chip on paper bg */
  --tag-ink: #fffbeb;
  --tag-pop-bg: #facc15;   /* bright yellow on the near-black (inverted) pop card */
  --tag-pop-ink: #111111;
}