/* ==========================================================================
   Editorial Broadsheet — design tokens
   Every colour and font-family in styles.css references a token from here.
   Light is the canonical theme. Dark is a courtesy variant.
   ========================================================================== */

/* --- Typefaces: self-hosted variable fonts, latin subset ---------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Type families -------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* --- Fluid type scale (1.2 minor third at small, 1.25 at large) ----- */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.11vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.35rem + 0.45vw, 1.75rem);
  --step-3:  clamp(1.728rem, 1.58rem + 0.74vw, 2.25rem);
  --step-4:  clamp(2.074rem, 1.83rem + 1.22vw, 3rem);
  --step-5:  clamp(2.488rem, 2.08rem + 2.04vw, 4rem);
  /* Height-aware on purpose. A width-only clamp produced a 203px masthead on a
     754px-tall viewport, which pushed the lede below the fold and clipped it
     mid-sentence. The vh term keeps two lines of display type to ~36% of the
     viewport height so the standfirst always survives the first screen. */
  --display: clamp(3.6rem, min(13.5vw, 21vh), 15rem);

  /* --- Measure & rhythm ----------------------------------------------- */
  --measure: 68ch;
  --measure-tight: 54ch;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --page-max: 90rem;

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  /* --- Colour: LIGHT (canonical) -------------------------------------- */
  color-scheme: light;
  --paper:      #FBF9F5;  /* warm paper, deliberately not #fff */
  --paper-sunk: #F4F0E7;
  --paper-raise:#FFFDFA;
  --ink:        #16130F;
  --ink-2:      #3D3730;
  --ink-3:      #6E665C;
  --rule:       #DDD6C9;
  --rule-soft:  #EBE5D9;
  --accent:     #D6431F;  /* vermilion — large text, rules, fills only */
  --accent-text:#A32F12;  /* 6.7:1 on paper — safe for body-size text */
  --accent-wash:#FBEAE3;
  --blue:       #1F3A5F;
  --selection:  #F7D9CE;
  --shadow:     0 1px 2px rgb(22 19 15 / 0.04), 0 8px 24px -12px rgb(22 19 15 / 0.14);
  --grain-opacity: 0.035;
}

/* --- Colour: DARK ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper:      #14120F;
    --paper-sunk: #100E0C;
    --paper-raise:#1D1A16;
    --ink:        #F3F0E9;
    --ink-2:      #C9C2B6;
    --ink-3:      #918A7E;
    --rule:       #322C25;
    --rule-soft:  #262119;
    --accent:     #FF7551;
    --accent-text:#FF8B6B;
    --accent-wash:#2A1A14;
    --blue:       #9DBEE4;
    --selection:  #4A2618;
    --shadow:     0 1px 2px rgb(0 0 0 / 0.5), 0 10px 30px -14px rgb(0 0 0 / 0.7);
    --grain-opacity: 0.055;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper:      #14120F;
  --paper-sunk: #100E0C;
  --paper-raise:#1D1A16;
  --ink:        #F3F0E9;
  --ink-2:      #C9C2B6;
  --ink-3:      #918A7E;
  --rule:       #322C25;
  --rule-soft:  #262119;
  --accent:     #FF7551;
  --accent-text:#FF8B6B;
  --accent-wash:#2A1A14;
  --blue:       #9DBEE4;
  --selection:  #4A2618;
  --shadow:     0 1px 2px rgb(0 0 0 / 0.5), 0 10px 30px -14px rgb(0 0 0 / 0.7);
  --grain-opacity: 0.055;
}