/* Design tokens — the single source of colour, type and radius for the app.
 *
 * Loaded BEFORE css/style.css, so style.css can override a component rule but
 * never has to restate a colour. Dark is the default (color-scheme: dark, and
 * the token values below); light follows the phone via prefers-color-scheme,
 * and :root[data-theme="light"|"dark"] lets a stored preference win in either
 * direction (Task 11's appearance setting). Accent is Mint #3DF0B4.
 *
 * Values come from docs/design/social-directions/*.dc.html — that mockup set is
 * the visual source of truth; do not invent new greys here.
 */
:root {
  color-scheme: dark;
  --bg: #0d0d0f;
  --bg-glow: radial-gradient(90% 38% at 12% -6%, #6a2a12 0%, #2a130c 45%, #0d0d0f 100%);
  --surface: #131316;
  --surface-2: #1c1c21;
  --border: #23222a;
  --border-strong: #3b3a44;
  --text: #f3efe9;
  --text-2: #c9c4bd;
  --text-dim: #8f8a83;
  --text-faint: #6f6b66;
  --accent: #3DF0B4;
  --accent-ink: #0d0d0f;   /* text on accent fills */
  --accent-text: #3DF0B4;  /* accent used as text */
  --danger: #ff5c5c;
  /* The record tag on a feed card, and nothing else (docs/feel-checklist.md
     §4). It cannot be mint: the spotlight card's own edge is mint, and a tag
     the same colour as the frame it sits inside is not a second signal. Gold
     reads on both grounds, so it is one value in both themes. */
  --gold: #f5c542;
  --gold-ink: #0d0d0f;
  --radius: 16px;
  --radius-sm: 10px;
  --font: Sora, "Helvetica Neue", Arial, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* Which of the five tabs the nav pill sits under. App.navigate sets it on
     .nav; the default here keeps the pill under Home before any JS runs. */
  --pill-index: 0;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f7f7f5;
    --bg-glow: radial-gradient(90% 34% at 12% -6%, #d9fbee 0%, #f2faf6 45%, #f7f7f5 100%);
    --surface: #ffffff;
    --surface-2: #efefed;
    --border: #e6e6e2;
    --border-strong: #cfcfca;
    --text: #101012;
    --text-2: #3d3d3a;
    --text-dim: #6e6e6a;
    --text-faint: #9a9a95;
    --accent-text: #0f9c74;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f5; --bg-glow: radial-gradient(90% 34% at 12% -6%, #d9fbee 0%, #f2faf6 45%, #f7f7f5 100%);
  --surface: #ffffff; --surface-2: #efefed; --border: #e6e6e2; --border-strong: #cfcfca;
  --text: #101012; --text-2: #3d3d3a; --text-dim: #6e6e6a; --text-faint: #9a9a95; --accent-text: #0f9c74;
}
html, body { background: var(--bg); color: var(--text); font-family: var(--font); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.btn { font-family: var(--font); font-weight: 700; border: 0; border-radius: 14px; height: 48px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--surface-2); color: var(--text-2); }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent-text); }