/* ============================================================================
   The Daily Next — v2 · TOKENS
   The single source of truth for colour, type, space, motion and radii.
   Surface stylesheets consume these and NEVER declare a raw hex or a raw pixel.
   See design/V2-DESIGN-SYSTEM.md §1–§4, §6.4.
   ========================================================================== */

/* ── Self-hosted variable faces ───────────────────────────────────────────
   No external font request, ever. latin is preloaded in the shell; latin-ext
   downloads only when a foreign title actually needs it. CJK titles (stored
   verbatim — a catalog rule) fall through to the system CJK stack, correctly. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/v2/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/v2/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/v2/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/v2/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks — overrides computed from the real face tables
   (frequency-weighted average advance width), so the webfont swap produces
   ZERO layout shift. Verified: the Inter/Arial numbers below match the
   published Next.js font-optimisation values to within 0.4%. */
@font-face {
  font-family: 'Fraunces fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 117.01%;
  ascent-override: 83.58%;
  descent-override: 21.79%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 107.51%;
  ascent-override: 90.11%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}

/* ── Theme-independent tokens ─────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Families */
  --font-display: 'Fraunces', 'Fraunces fallback', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter', 'Inter fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type roles — size / weight / tracking / leading.
     Display serif is NEVER bold; negative tracking scales with size. */
  --t-display-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem);
  --t-display-track: -0.022em;
  --t-display-lead: 0.96;

  --t-h1-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --t-h1-track: -0.018em;
  --t-h1-lead: 1.04;

  --t-h2-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --t-h2-track: -0.014em;
  --t-h2-lead: 1.1;

  --t-h3-size: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);
  --t-h3-track: -0.01em;
  --t-h3-lead: 1.2;

  --t-lede-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-body-lg-size: 1.0625rem;
  --t-body-size: 0.9375rem;
  --t-ui-size: 0.875rem;
  --t-meta-size: 0.8125rem;
  /* 12px. The gap between meta (13) and micro (11) was too wide for an index
     meta line, which forced surfaces to split one figure across two sizes. */
  --t-fine-size: 0.75rem;
  --t-eyebrow-size: 0.6875rem;
  --t-eyebrow-track: 0.13em;
  --t-micro-size: 0.6875rem;
  --t-ref-size: 0.75rem;

  /* Space — 8px base, 4px half-step. No raw pixels downstream. */
  --s-0: 0px;
  --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: 176px;

  /* Page frame */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
  --maxw-narrow: 760px;
  /* Between the editorial column and the full field — for mounting an artefact
     (the email proof sheet) with real air either side of it. */
  --maxw-mid: 1016px;
  --measure: 66ch;
  /* `ch` is the width of "0", and Fraunces' zero is wide — 66ch set in the
     display serif lands near 90 characters, well past the 62–72 a reader wants.
     Serif prose gets its own measure in em, which tracks real glyph widths. */
  --measure-serif: 34em;
  --gap: var(--s-5);

  /* Vertical rhythm — the three-step scale, used on every surface */
  --rhythm-block: var(--s-6);
  --rhythm-section: var(--s-8);
  --rhythm-movement: var(--s-10);

  /* Radii — paper doesn't have big round corners */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-snap: cubic-bezier(0.2, 0.9, 0.25, 1);
  --d-instant: 90ms;
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 420ms;
  --d-page: 520ms;

  /* Chrome */
  --masthead-h: 60px;

  /* A product shot on white must never sit on black — the tile is the one
     colour that is identical in both themes.
     This went round twice. #f2f0ec made a cut-out shot on pure white read as a
     white rectangle floating in cream. Near-white (#fcfbf9) hid the seam but two
     independent reviews called it "the worst of both": too light to be a mat,
     not light enough to disappear, and on a dark page a wall of these inverts
     the ground. The answer is to COMMIT: a real warm mat plus the keyline below,
     so the shot reads as a mounted print and the edge is deliberate rather than
     an artifact. A mount is allowed to be visible; a seam is not. */
  --photo-tile: #f4f1ea;
  /* The keyline that turns the tile into a mount. Theme-independent, because
     the tile it sits on is. */
  --photo-edge: rgba(20, 19, 15, 0.1);
  /* Ink for anything drawn ON the tile (the placeholder mark). Also
     theme-independent — surfaces were deriving this from --scrim. */
  --photo-ink: rgba(20, 19, 15, 0.22);
}

@media (min-width: 900px) {
  :root { --masthead-h: 68px; }
}
@media (max-width: 600px) {
  :root {
    --gap: var(--s-4);
    --rhythm-movement: var(--s-8);
    --rhythm-section: var(--s-7);
  }
}

/* ── PAPER (default) ──────────────────────────────────────────────────── */
:root,
:root[data-theme='paper'] {
  --paper: #faf8f4;
  --paper-2: #f3f0ea;
  --surface: #ffffff;
  --surface-2: #f7f5f1;

  --ink: #14130f;
  --ink-2: #4a4740;
  --ink-3: #78736a;
  --ink-4: #a49e93;

  --rule: rgba(20, 19, 15, 0.11);
  --rule-strong: rgba(20, 19, 15, 0.2);

  --accent: #8a6a2f;
  --accent-ink: #ffffff;
  --accent-wash: rgba(138, 106, 47, 0.08);
  --accent-line: rgba(138, 106, 47, 0.3);

  --focus: #2a6df4;
  --danger: #a32b25;
  --positive: #2c6b45;

  --lift-1: 0 1px 2px rgba(20, 19, 15, 0.04), 0 2px 8px rgba(20, 19, 15, 0.04);
  --lift-2: 0 2px 6px rgba(20, 19, 15, 0.05), 0 12px 28px rgba(20, 19, 15, 0.07);
  --lift-3: 0 8px 20px rgba(20, 19, 15, 0.08), 0 40px 90px rgba(20, 19, 15, 0.13);

  --scrim: rgba(28, 26, 21, 0.34);
  --masthead-bg: rgba(250, 248, 244, 0.86);
  --skeleton: rgba(20, 19, 15, 0.055);
  /* A neutral recessed ground for anything presented AS an artefact rather than
     as part of the page — the email proof stage, a code sample, a swatch. */
  --stage: #eeebe4;
}

/* ── NIGHT ────────────────────────────────────────────────────────────── */
:root[data-theme='night'] {
  --paper: #0b0b0d;
  --paper-2: #121216;
  --surface: #17171c;
  --surface-2: #1e1e24;

  --ink: #f2f1ee;
  --ink-2: #a9a69e;
  --ink-3: #7b7770;
  --ink-4: #5a5750;

  --rule: rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.18);

  --accent: #c9a96e;
  --accent-ink: #17130a;
  --accent-wash: rgba(201, 169, 110, 0.12);
  --accent-line: rgba(201, 169, 110, 0.32);

  --focus: #7aa5ff;
  --danger: #f2645c;
  --positive: #63c48d;

  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --lift-3: 0 40px 100px rgba(0, 0, 0, 0.62);

  --scrim: rgba(4, 4, 6, 0.66);
  --masthead-bg: rgba(11, 11, 13, 0.82);
  --skeleton: rgba(255, 255, 255, 0.055);
  --stage: #0f0f12;
}

/* Follow the OS when the reader hasn't pinned a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='paper']) {
    --paper: #0b0b0d;
    --paper-2: #121216;
    --surface: #17171c;
    --surface-2: #1e1e24;

    --ink: #f2f1ee;
    --ink-2: #a9a69e;
    --ink-3: #7b7770;
    --ink-4: #5a5750;

    --rule: rgba(255, 255, 255, 0.14);
    --rule-strong: rgba(255, 255, 255, 0.18);

    --accent: #c9a96e;
    --accent-ink: #17130a;
    --accent-wash: rgba(201, 169, 110, 0.12);
    --accent-line: rgba(201, 169, 110, 0.32);

    --focus: #7aa5ff;
    --danger: #f2645c;
    --positive: #63c48d;

    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lift-2: 0 12px 32px rgba(0, 0, 0, 0.5);
    --lift-3: 0 40px 100px rgba(0, 0, 0, 0.62);

    --scrim: rgba(4, 4, 6, 0.66);
    --masthead-bg: rgba(11, 11, 13, 0.82);
    --skeleton: rgba(255, 255, 255, 0.055);
    --stage: #0f0f12;
  }
}