/* WRotate design system — the single source of truth for design tokens.
   Loaded by index.html, p/index.html and profile/index.html. Do not
   re-declare any of these in a page; tests/design-system-tokens.test.js
   fails the build if you do.

   [data-theme="light"] is paired with :root so the landing screen, which
   carries that attribute, can force light regardless of the app theme. */

:root, [data-theme="light"] {
  --bg: #f5f5f8;
  --surface: #ffffff;
  --surface2: #eeeff5;
  --border: #d8d9e8;
  --gold: #9a7628;
  /* Gold used as TEXT needs to be darker than gold used as a surface. #9a7628
     measures 4.20 on --surface, 3.86 on --bg and 3.66 on --surface2 — below the
     4.5:1 WCAG AA floor. Darkening --gold itself would fix the 113 text rules and
     break the 47 background ones: dark-on-gold buttons drop 4.70 -> 3.81. So the
     two uses get two values. #8b6719 clears 4.5 on all three light surfaces.
     Audit U5. */
  --gold-text: #8b6719;
  --gold-lt: #c9a84c;
  --gold-dim: rgba(154,118,40,.12);
  --text: #16161e;
  /* #70708a measured 4.41:1 on --bg and 4.18:1 on --surface2, under the 4.5:1
     WCAG AA floor — 225 labels across feed/track/collection/wishlist/stats failed
     it. #6a6a84 clears 4.5 on all three light backdrops. Audit U5. */
  --muted: #6a6a84;
  --danger: #e05555;
  --success: #4caf7d;
  --radius: 10px;
  --overlay-bg: rgba(245,245,248,.96);

  /* ── Aliases ──
     index.html referenced these five for months without ever declaring them,
     so each rule was thrown away and the property reset: backgrounds painted
     transparent, colours fell back to the parent. Declared here as aliases of
     tokens that already exist, so nothing new enters the palette.
     These are repeated verbatim in the dark block below — see the note there
     before you think about deduplicating them. */
  --hover: var(--surface2);
  --surface1: var(--surface2);
  --error: var(--danger);
  --fg: var(--text);
  --accent: var(--gold);

  /* ── Scale tokens (theme-independent) ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-btn: 8px; --radius-pill: 999px;
  --fs-2xs: .62rem; --fs-xs: .68rem; --fs-sm: .75rem; --fs-base: .82rem;
  --fs-md: .95rem; --fs-lg: 1.1rem; --fs-xl: 1.3rem; --fs-2xl: 1.6rem; --fs-3xl: 2.5rem;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-snug: 1.4; --lh-body: 1.55;
  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px;
  --ls-eyebrow: .08em;
}

[data-theme="dark"] {
  --bg: #0b0b10;
  --surface: #141419;
  --surface2: #1c1c25;
  --border: #272734;
  --gold: #c9a84c;
  /* Dark gold already measures 7.40–8.65 on every dark surface, so text and
     surface can share one value here. Declared rather than inherited: an alias
     written only in :root resolves against the LIGHT value (see the note below). */
  --gold-text: var(--gold);
  --gold-lt: #dbbe72;
  --gold-dim: color-mix(in srgb, var(--gold) 12%, transparent);
  --text: #e6e6f0;
  /* #7a7a95 measured 4.41:1 on --surface and 4.06:1 on --surface2, under the
     4.5:1 WCAG AA floor for body text — 25 muted labels in the feed failed it.
     #82829d clears 4.5 on --bg, --surface AND --surface2 and is visually all but
     identical. Light mode already passed. Audit U5. */
  --muted: #82829d;
  --overlay-bg: rgba(11,11,16,.94);

  /* ── Aliases, repeated on purpose ──
     Do NOT delete these as duplicates of the light block. A var() inside a
     custom property is substituted on the element that DECLARES it, not on the
     element that uses it. An alias written only in :root therefore resolves
     against :root's light values and inherits that frozen result into dark —
     measured: --hover came out #eeeff5 on a dark surface. Each theme has to
     resolve its own aliases. */
  --hover: var(--surface2);
  --surface1: var(--surface2);
  --error: var(--danger);
  --fg: var(--text);
  --accent: var(--gold);
}