/* ==========================================================================
   White Crow® — design tokens
   Type system mirrors Big Spaceship's three slots:
     display (Rhymes Text)  -> Montserrat, standing in for Proxima Nova
     text    (Modern Gothic) -> General Sans
     mono    (MG Mono)       -> Space Mono
   ========================================================================== */

/* --- faces ---------------------------------------------------------------- */

/* Montserrat (OFL, self-hosted) stands in for Proxima Nova. Variable file covers 300-800. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  /* Type stacks. --font-display is the single swap point for the header face:
     replace the @font-face above and the first name here, nothing else. */
  --font-display: 'Montserrat', 'Proxima Nova', system-ui, sans-serif;
  --font-text: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces — near-black with a cool cast, pulled from the crow's navy. */
  --wc-void:  #07070B;
  --wc-base:  #0B0B11;
  --wc-raise: #12121B;
  --wc-sunk:  #050508;

  /* Ink — warm off-white so the blackletter doesn't read clinical. */
  --wc-ink:   #F2F0EA;
  --wc-mute:  #8C8C9A;
  --wc-faint: #4A4A57;

  --wc-line:       rgba(242, 240, 234, 0.10);
  --wc-line-soft:  rgba(242, 240, 234, 0.05);

  /* Accent. Driven by scroll — scroll.js interpolates between the two stops
     below and writes the result back to --wc-accent. */
  /* One accent only: the pale blue. The gold is gone. scroll.js still shifts
     between the two stops below, now a narrow range inside the same hue. */
  --wc-accent:      #7FA8C9;
  --wc-accent-warm: #7FA8C9;
  --wc-accent-cold: #A9CBE2;
  --wc-accent-ink:  #07070B;   /* text on an accent fill */

  /* H1 words meant to recede into the page. Deliberately a shade above the
     background rather than identical to it, so the text is still selectable,
     still legible on a good screen, and not a background-matched-text signal. */
  --wc-blend: #191922;

  /* Fluid type scale. Clamps are viewport-relative between 380px and 1600px. */
  --step--2: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.98rem);
  --step-0:  clamp(1.00rem, 0.92rem + 0.38vw, 1.25rem);
  --step-1:  clamp(1.20rem, 1.07rem + 0.58vw, 1.56rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.86vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.45rem + 1.24vw, 2.44rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.77vw, 3.05rem);
  --step-5:  clamp(2.49rem, 1.93rem + 2.49vw, 3.82rem);
  --step-6:  clamp(2.99rem, 2.22rem + 3.47vw, 4.77rem);

  /* Display sizes — these are meant to feel oversized. */
  --display-sm: clamp(2.8rem, 1.6rem + 6.0vw, 7rem);
  --display-md: clamp(3.4rem, 1.4rem + 9.5vw, 11rem);
  --display-lg: clamp(4.0rem, 1.0rem + 13.5vw, 16rem);

  /* Space scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Section rhythm — the vertical beat between major sections. */
  --section-y: clamp(5rem, 10vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 68ch;
  --maxw: 1560px;

  /* Motion. --ease-out-expo is the house curve: fast out, long settle. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-mid:  0.6s;
  --dur-slow: 1.1s;

  --radius: 2px;
  --border: 1px solid var(--wc-line);

  /* Set to 0 by main.js when the user prefers reduced motion. Anything
     purely decorative multiplies its travel/opacity by this. */
  --motion: 1;

  color-scheme: dark;
}

/* Reduced motion: neutralise the decorative layer at the token level so
   individual components don't each have to remember. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
    --dur-fast: 0.01ms;
    --dur-mid:  0.01ms;
    --dur-slow: 0.01ms;
  }
}