/* ============================================================
   NEXTMARS — 1_TOKENS   ★ THE SWAPPABLE LAYER ★
   ------------------------------------------------------------
   Everything visual that might change lives here and ONLY here.
   No other stylesheet hard-codes a colour, size or radius.

   To restyle the whole site:
     · pick a theme below (or write a new [data-theme="x"] block)
     · change --accent  → the entire brand accent follows
     · change --font-*  → the entire typographic voice follows
   See THEMING.md for the 60-second walkthrough.
   ============================================================ */

:root {
  /* ---------- type families ---------- */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- type scale (fluid) ---------- */
  --t-hero: clamp(2.4rem, 5vw, 5.4rem);
  --t-h1: clamp(2.1rem, 4.6vw, 4.1rem);
  --t-h2: clamp(1.75rem, 3.3vw, 2.85rem);
  --t-h3: clamp(1.12rem, 1.5vw, 1.4rem);
  --t-lead: clamp(1rem, 1.25vw, 1.2rem);
  --t-body: clamp(0.95rem, 1.02vw, 1.02rem);
  --t-sm: 0.875rem;
  --t-xs: 0.78rem;
  --t-label: 0.6875rem;

  --lh-tight: 0.94;
  --lh-snug: 1.12;
  --lh-body: 1.6;

  --tracking-display: -0.035em;
  --tracking-head: -0.022em;
  --tracking-label: 0.16em;

  /* ---------- space scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 180px;

  /* Section rhythm: two adjacent blocks share this value top+bottom.
     Kept deliberately tighter than a typical editorial site — the six
     numbered chapters read as one continuous story, not six separate pages. */
  --section-y: clamp(52px, 5.2vw, 84px);
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1560px;
  --measure: 62ch;

  /* ---------- form ---------- */
  --radius: 2px;
  --radius-pill: 999px;
  --border-w: 1px;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 760ms;
  --dur-marquee: 120s;

  /* ---------- layer ---------- */
  --z-head: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}

/* ============================================================
   THEME · NOIR   (default — gallery dark)
   ============================================================ */
:root,
[data-theme="noir"] {
  color-scheme: dark;

  --bg: #08080a;
  --bg-2: #0d0d10;
  --bg-3: #131317;
  --bg-invert: #f2efe8;

  --ink: #f2efe8;
  --ink-2: rgba(242, 239, 232, 0.64);
  --ink-3: rgba(242, 239, 232, 0.4);
  --ink-4: rgba(242, 239, 232, 0.24);
  --ink-invert: #0a0a0c;

  --line: rgba(242, 239, 232, 0.1);
  --line-2: rgba(242, 239, 232, 0.2);

  --accent: #ff5a36;
  --accent-ink: #0a0a0c;
  --accent-soft: rgba(255, 90, 54, 0.12);

  /* Form feedback. --accent reads as "something needs your attention", so a
     successful submit needs its own hue — otherwise "Thanks, your brief is in"
     arrives looking like an error. */
  --ok: #3fcf78;
  --ok-soft: rgba(63, 207, 120, 0.1);

  --card-bg: rgba(242, 239, 232, 0.028);
  --card-bg-hover: rgba(242, 239, 232, 0.06);

  --live: #35c46f; /* "online now" dot — same green reads on all themes */

  --img-tint: 1;
  --noise-opacity: 0.038;
}

/* ============================================================
   THEME · PAPER   (light editorial — for print / light preference)
   ============================================================ */
[data-theme="paper"] {
  color-scheme: light;

  --bg: #f3f0e9;
  --bg-2: #ece8df;
  --bg-3: #e4dfd4;
  --bg-invert: #12110f;

  --ink: #141310;
  --ink-2: rgba(20, 19, 16, 0.66);
  --ink-3: rgba(20, 19, 16, 0.44);
  --ink-4: rgba(20, 19, 16, 0.26);
  --ink-invert: #f7f4ee;

  --line: rgba(20, 19, 16, 0.14);
  --line-2: rgba(20, 19, 16, 0.26);

  --accent: #c8412b;
  --accent-ink: #f7f4ee;
  --accent-soft: rgba(200, 65, 43, 0.1);

  /* Darker green: #3fcf78 only clears 2.4:1 on paper, which fails AA. */
  --ok: #0e7a45;
  --ok-soft: rgba(14, 122, 69, 0.07);

  --card-bg: rgba(20, 19, 16, 0.032);
  --card-bg-hover: rgba(20, 19, 16, 0.06);

  --img-tint: 1;
  --noise-opacity: 0.05;
}

/* ============================================================
   THEME · EMBER   (brand-forward — closest to the old red)
   ============================================================ */
[data-theme="ember"] {
  color-scheme: dark;

  --bg: #100a09;
  --bg-2: #170e0c;
  --bg-3: #1e1310;
  --bg-invert: #fbeee7;

  --ink: #fbeee7;
  --ink-2: rgba(251, 238, 231, 0.66);
  --ink-3: rgba(251, 238, 231, 0.42);
  --ink-4: rgba(251, 238, 231, 0.24);
  --ink-invert: #140b09;

  --line: rgba(251, 238, 231, 0.12);
  --line-2: rgba(251, 238, 231, 0.22);

  --accent: #ff6161;
  --accent-ink: #140b09;
  --accent-soft: rgba(255, 97, 97, 0.14);

  --ok: #4fd98a;
  --ok-soft: rgba(79, 217, 138, 0.1);

  --card-bg: rgba(251, 238, 231, 0.03);
  --card-bg-hover: rgba(251, 238, 231, 0.07);

  --img-tint: 1.04;
  --noise-opacity: 0.04;
}