/*
 * Poster: design tokens. The only place these colors, radii and font stacks are defined;
 * skin.css reads them and never hardcodes its own.
 *
 * The page background is the field: the accent from the page's one nonce'd accent block
 * (DESIGN §4.8), a preset (tomato #ff5a36, sunflower #ffd23f, cobalt #4d7cff, mint #3ee6a8,
 * bubblegum #ff7ac0) or any color the owner picks. All text on the field is --po-ink, near-black.
 * The manifest's contrast_bg is that ink, so the block's --lb-accent-ink is the accent moved just
 * far enough toward white to read under it (4.5:1): every preset passes as it is, a dark custom
 * color (navy, black) comes out as a lighter shade of itself. The field is never drawn with the
 * raw --lb-accent. Text the other way round (field-colored words on an ink label) reads at the
 * same ratio, since contrast is symmetric.
 *
 * Everything else is fixed: buttons, cards and dialogs are paper with ink text, a thick ink
 * border and a hard ink shadow.
 *
 * Contrast (WCAG 2.x ratios; AA = 4.5 for body text):
 *                          on --po-paper   on --po-paper-2
 *   --po-ink                  17.71            15.66
 *   --po-muted                 8.97             7.94
 *   --po-danger                5.48             4.85
 *   --po-success               5.17             4.57
 *   --po-warning               5.70             5.04
 *   --po-ink on the field: tomato 5.94, sunflower 12.76, cobalt 4.95, mint 11.48, bubblegum 7.72,
 *   any custom color 4.50 or more. Muted and status colors are never drawn on the field.
 * tests/links/skins/ContrastTest.php checks every pair, every preset and a sweep of custom colors.
 */

:root {
  color-scheme: light;

  /* The field: the page's color (the accent block's ink; the default preset, tomato, until it sets its own) */
  --po-field: var(--lb-accent-ink, #ff5a36);

  /* Ink and paper */
  --po-ink: #141414;
  --po-paper: #fffaf0;
  --po-paper-2: #f3ecdd;
  --po-muted: #4b4640;
  --po-line: #141414;

  /* Status (as text on paper) */
  --po-danger: #c4291c;
  --po-success: #1d7a3e;
  --po-warning: #8a5a00;

  /* Type. Body, buttons and small labels are Montserrat in every pairing. */
  --po-font-body: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display titles, set by the pairing on <html data-type="condensed|extended|signature">. */
  --po-font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --po-display-weight: 400;
  --po-display-stretch: 100%;
  --po-display-tracking: 0.01em;
  --po-display-leading: 0.9;
  --po-display-scale: 1;
  --po-display-width: auto;

  /* Shape */
  --po-border: 3px;
  --po-border-thin: 2px;
  --po-radius-sm: 10px;
  --po-radius: 14px;
  --po-radius-lg: 22px;
  --po-lift: 5px;

  /* Tracking for uppercase text */
  --po-track-caps: 0.08em;
  --po-track-wide: 0.22em;
}

/* Type pairings. The attribute goes on <html>; on any other element it scopes the pairing. */
[data-type="condensed"] {
  --po-font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --po-display-weight: 400;
  --po-display-stretch: 100%;
  --po-display-tracking: 0.01em;
  --po-display-leading: 0.9;
  --po-display-scale: 1;
  --po-display-width: auto;
}

[data-type="extended"] {
  --po-font-display: "Archivo Expanded", "Archivo Expanded Fallback", "Arial Black", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --po-display-weight: 900;
  --po-display-stretch: 125%;
  --po-display-tracking: -0.01em;
  --po-display-leading: 0.98;
  --po-display-scale: 0.66;
  --po-display-width: auto;
}

/* Stacked: one word to a line (min-content width), big and heavy. */
[data-type="signature"] {
  --po-font-display: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --po-display-weight: 900;
  --po-display-stretch: 100%;
  --po-display-tracking: -0.035em;
  --po-display-leading: 0.92;
  --po-display-scale: 0.86;
  --po-display-width: min-content;
}