/* MOV.AP design tokens. The palette follows the movement's logo: teal box #085E5B, green O #3AD647, red bar #E5171A,
   cream ground #E8E5C2. The poster base is a deeper shade of the logo teal so text and accents pass WCAG AA on it;
   the derived tones exist only to pass WCAG AA where the brand values cannot. (Token names predate the logo palette:
   "green" is the teal, "lime" the logo green.) */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette (from the logo) */
  --green-900: #06403E;        /* poster base: the logo teal, deepened (paper-50 10.3:1, lime-400 6.0:1) */
  --red-600: #E5171A;
  --lime-500: #2FBF3D;
  --lime-400: #3AD647;         /* the logo's green O */
  --paper-100: #E8E5C2;        /* the logo's cream ground */
  --paper-50: #F4F2E4;
  --ink-900: #151A14;
  --amber-500: #F5A623;

  /* derived */
  --green-800: #085E5B;        /* the logo teal: raised panels and the logo box */
  --green-700: #12706C;        /* hairlines that must read on green */
  --red-700: #B0000A;          /* red text on paper: 5.8:1 */
  --red-300: #FF7A70;          /* red text on the poster base: 4.6:1 */
  --ink-600: #5A5446;          /* secondary text on paper: 5.9:1 */
  --paper-300: #D6D2AC;        /* rules on paper */
  --ochre-700: #8A5300;        /* the ⚑ flag on paper: 5.3:1 (amber-500 is 1.7:1 there) */
  --white: #FFFFFF;

  /* the ⚑ assumption flag (WCAG 1.4.11, ≥ 3:1): ochre on paper by default, amber on the poster base (5.7:1) */
  --flag: var(--ochre-700);

  /* type families: no system-ui fallbacks on purpose; condensed faces first */
  --font-display: "Archivo", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Courier New", Courier, monospace;

  /* display width/weight (Archivo variable axes) */
  --display-stretch: 62%;
  --display-weight: 900;
  --label-stretch: 78%;

  /* text scale (Bringhurst-ish, ratio 1.2 around an 18px serif) */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1.125rem;  /* 18 */
  --text-md: 1.3125rem;   /* 21 */
  --text-lg: 1.5625rem;   /* 25 */
  --leading: 1.5556;      /* 28px on 18px: sits on the dossier ruling */
  --ruling: 28px;

  /* display scale (fluid) */
  --display-1: clamp(3.4rem, 1.6rem + 9.2vw, 10.5rem);
  --display-2: clamp(2.6rem, 1.4rem + 5.6vw, 6.25rem);
  --display-3: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem);
  --display-4: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);

  /* space (4px base) */
  --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: 4.5rem;
  --s-9: 7rem;

  --gutter: 1rem;            /* 16px phone gutter */
  --wrap: 82rem;
  --measure: 38rem;          /* ~66ch of the serif */

  --rule-heavy: 3px;
  --rule: 1px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}
@media (min-width: 80rem) {
  :root { --gutter: 3rem; }
}

/* Context colours. Every component reads these, so it adapts to poster (green) or dossier (paper). */
.poster,
.site-header,
.site-footer {
  --bg: var(--green-900);
  --bg-raised: var(--green-800);
  --fg: var(--paper-50);
  --fg-muted: #C5DCD8;           /* 8.1:1 on the poster base */
  --rule-color: rgb(244 242 228 / 0.28);
  --accent: var(--lime-400);
  --alarm: var(--red-300);
  --cite: var(--lime-400);
  --flag: var(--amber-500);
  --focus: var(--lime-400);
  --btn-bg: var(--paper-50);
  --btn-fg: var(--green-900);
  --btn-shadow: var(--lime-400);
  color-scheme: dark;
}

.dossier {
  --bg: var(--paper-100);
  --bg-raised: var(--paper-50);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --rule-color: var(--paper-300);
  --accent: var(--red-700);
  --alarm: var(--red-700);
  --cite: var(--red-700);
  --flag: var(--ochre-700);
  --focus: var(--ink-900);
  --btn-bg: var(--ink-900);
  --btn-fg: var(--paper-50);
  --btn-shadow: var(--red-600);
  color-scheme: light;
}