/* LOW COUNTRY tokens: the single source of truth. Re-skin starts and ends here.

   The palette is a risograph duotone. Two inks, two grounds, and one overprint
   colour that exists only where the inks physically cross. Every ratio below was
   computed, not eyeballed; the numbers live in styleguide.html and docs/DIRECTION.md.  */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sen";
  src: url("../fonts/sen-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- grounds: the paper stock and the press black ---- */
  --newsprint: #f2ede3;
  --newsprint-2: #e9e2d4;
  --newsprint-3: #dcd3c1;
  --press: #16151a;
  --press-2: #211f26;
  --press-3: #2c2933;

  /* ---- the two inks, each in the strength its ground can carry ----
     blue ink  #00284C : 12.78:1 on newsprint
     blue raw  #93AEEA : 8.20:1 on press black
     pink ink  #C82A4E : 4.62:1 on newsprint
     pink raw  #F77E90 : 7.21:1 on press black                          */
  --blue-ink: #00284c;
  --blue-raw: #93aeea;
  --pink-ink: #c82a4e;
  --pink-raw: #f77e90;

  /* ---- overprint: what the two inks make where they cross.
     Decoration only. Nothing on this site depends on it to mean anything. ---- */
  --overprint: #000717;
  --overprint-raw: #8e5684;

  /* ---- greys pulled from the stock, not from a neutral ramp ---- */
  --graphite: #5a554d;  /* 6.33:1 on newsprint */
  --chalk: #a5a099;     /* 6.99:1 on press black */

  /* ---- semantics: newsprint is the default sheet ---- */
  --bg: var(--newsprint);
  --bg-2: var(--newsprint-2);
  --bg-3: var(--newsprint-3);
  --fg: var(--press);
  --muted: var(--graphite);
  --ink-a: var(--blue-ink);
  --ink-b: var(--pink-ink);
  --line: rgba(22, 21, 26, 0.18);
  --line-strong: rgba(22, 21, 26, 0.58);
  --tape: rgba(200, 42, 78, 0.14);
  --focus: var(--pink-ink);
  --blend: multiply;

  /* ---- type ---- */
  --font-poster: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Sen", "Avenir Next", "Segoe UI", sans-serif;
  --t-marquee: clamp(3.6rem, 15vw, 12rem);
  --t-h1: clamp(2.9rem, 9.5vw, 8rem);
  --t-h2: clamp(2.1rem, 5.4vw, 4.2rem);
  --t-h3: clamp(1.5rem, 3.4vw, 2.5rem);
  --t-song: clamp(1.7rem, 5vw, 3.4rem);
  --t-lead: clamp(1.1rem, 1.7vw, 1.38rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-label: 0.72rem;
  --lh-poster: 0.86;
  --lh-heading: 1.02;
  --lh-body: 1.62;
  --track-label: 0.17em;
  --track-poster: 0.005em;

  /* ---- space ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-pad: clamp(4.5rem, 11vh, 8.5rem);
  --edge: clamp(1.1rem, 4vw, 3.5rem);
  --measure: 36rem;
  --max-w: 84rem;

  /* ---- shape: a press shop has no soft corners ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-tape: 1px;
  --rule: 2px;
  --rule-heavy: 4px;

  /* ---- motion ---- */
  --dur-1: 140ms;
  --dur-2: 300ms;
  --dur-3: 520ms;
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-inout: cubic-bezier(0.7, 0, 0.2, 1);

  /* ---- layers ---- */
  --z-sheet: 40;
  --z-pinned: 50;
  --z-skip: 60;
}

/* the press-black sheet: any wrapper carrying data-theme="press" flips the set */
[data-theme="press"] {
  --bg: var(--press);
  --bg-2: var(--press-2);
  --bg-3: var(--press-3);
  --fg: var(--newsprint);
  --muted: var(--chalk);
  --ink-a: var(--blue-raw);
  --ink-b: var(--pink-raw);
  --line: rgba(242, 237, 227, 0.2);
  --line-strong: rgba(242, 237, 227, 0.62);
  --tape: rgba(247, 126, 144, 0.18);
  --focus: var(--pink-raw);
  /* inks on a dark ground overprint by lightening, the way a screen does */
  --blend: screen;
}