/* Readprint — design tokens
   Colour palette (light + dark + mood spectrum), type, spacing, radii, fonts, easing.
   Change values HERE to re-skin the whole site. Never hard-code these elsewhere. */

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.ttf") format("truetype-variations"),
       url("../fonts/work-sans.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla.ttf") format("truetype-variations"),
       url("../fonts/karla.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* brand accent */
  --green: #0BA371;
  --green-press: #098C61;
  --green-ink: #0A6044;
  --green-cont: #E2F6EE;

  /* light chrome */
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;
  --bg-soft-2: #EEF0F3;
  --ink: #0D0D11;
  --ink-2: #5E5E68;
  --ink-3: #9A9AA4;
  --line: #E7E8EC;

  /* dark chrome */
  --d-bg: #08080B;
  --d-bg-2: #101015;
  --d-ink: #F4F4F6;
  --d-ink-2: #9C9CA6;
  --d-ink-3: #5C5C66;
  --d-line: #20202A;

  /* mood spectrum (Rough → Great) */
  --m0: #FB4E62;
  --m1: #FF8A3D;
  --m2: #FBBF24;
  --m3: #5FD16A;
  --m4: #16C784;

  /* radii */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* type */
  --font-head: "Work Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-body: "Karla", ui-sans-serif, -apple-system, system-ui, sans-serif;

  /* layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* spacing scale — the one source for gap & padding (see base.css .stack/.row) */
  --s-xs: .5rem;
  --s-sm: .75rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2rem;
  --s-2xl: clamp(2.5rem, 5vw, 3.5rem);
  --s-3xl: clamp(3.5rem, 7vw, 5rem);
  --s-4xl: clamp(5rem, 10vw, 8rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
}