/* QuotePull design tokens — spec §9. Light theme only. */

/* Self-hosted fonts (latin subsets, SIL Open Font License — see /fonts). */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Literata-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Literata-var-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/InstrumentSans-var.woff2') format('woff2');
}
/* Public Sans is a variable font (wght 100-900), the display face for the mark
   and headings. The site's mark is two U+2019 set flush at weight 700 with the
   second one turned, so that weight has to be in the file the curtain waits on
   — it is, the face is the whole 100-900 range. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/PublicSans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/PublicSans-var-italic.woff2') format('woff2');
}

/* Metric-matched stand-ins, so the moment the real faces arrive nothing moves.
   Each aliases the system font the stack falls back to anyway (ChromeOS maps
   Georgia to Gelasio and Arial to Arimo, both metric-compatible), scaled and
   with its vertical metrics overridden to match the web font it stands in
   for. Literata's and Instrument Sans's numbers came from the fonts' own
   metrics (capsize metrics v4.2.0): size-adjust = xWidthAvg ratio, overrides =
   web ascent/descent over (unitsPerEm x size-adjust). Public Sans's were
   measured in the browser instead (`tools/render.mjs` drives it) — the
   size-adjust is the width of a sample sentence over Arial's, which is the
   ratio that actually decides whether a line rewraps on the swap. The pages
   also preload the three upright faces, so on anything but a slow first visit
   the swap happens before first paint. */
@font-face {
  font-family: 'Literata Fallback';
  src: local('Georgia');
  size-adjust: 107.67%;
  ascent-override: 109.31%;
  descent-override: 28.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial');
  size-adjust: 103.14%;
  ascent-override: 92.11%;
  descent-override: 22.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 102.74%;
  ascent-override: 94.42%;
  descent-override: 24.33%;
  line-gap-override: 0%;
}

:root {
  /* palette */
  --paper: #f4f5f7;
  --panel: #ffffff;
  --ink: #1f2430;
  --ink-muted: #5c6472;
  --rule: #e1e3e8;
  /* The mark is black, and so is everything that used to be the accent green:
     buttons, links, focus, the selected row. The colour in this app belongs to
     the student's themes — six highlight colours they name themselves — and a
     coloured chrome was competing with them. --danger stays red because it is
     the one thing that must not read as ordinary. */
  --accent: #101216;
  --accent-ink: #ffffff;
  --accent-tint: #eceef2;
  --danger: #a4472f;

  /* highlight colours — muted on purpose; all keep --ink at AA contrast */
  --hl-amber: #fbe4a6;
  --hl-sage: #cfe0c8;
  --hl-sky: #c9dcef;
  --hl-clay: #f3cfc2;
  --hl-lilac: #ded2ee;
  --hl-fog: #dcdcd4;

  /* type */
  --font-reading: 'Literata', 'Literata Fallback', Georgia, 'Times New Roman', serif;
  --font-ui: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Public Sans', 'Public Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --reading-size: 1.1875rem; /* 19px at the default browser size; scales with user font settings */
  --reading-lh: 1.7;
  --reading-measure: 62ch;
  --ui-size: 0.9375rem;
  --ui-size-sm: 0.8125rem;

  /* The mark. Two U+2019 at weight 700, set flush, with the second one turned
     — mirrored, not a different character — so the pair reads as a lowercase q
     and p. It is not a typeable string and no quotation mark stands in for it
     anywhere; where it has to be described, it is described in words.

     Public Sans hangs a quote glyph high in the em box: measured off the font
     itself (tools/render.mjs), the ink is 0.29em tall and 0.443em wide, and
     with line-height 1 its centre sits 0.275em down from the top of the box.
     So a 0.225em drop is what puts the pair in the optical middle of a 1em
     box. Turning the second glyph is a horizontal mirror about its own advance
     box, so it moves nothing vertically and widens the pair by about 0.01em —
     the drop below is unaffected. Every place the mark appears positions
     against these. */
  --mark-ink-h: 0.29em;
  --mark-ink-w: 0.443em;
  --mark-ink-mid: 0.275em;
  /* Centre the ink in a box that is one em tall (line-height 1). */
  --mark-drop: calc(0.5em - var(--mark-ink-mid));
  /* Centre it in a box cropped to the ink itself, for a mark set tight against
     something else — the social card sets the name right under it. */
  --mark-drop-tight: calc(var(--mark-ink-h) / 2 - var(--mark-ink-mid));

  /* shape */
  --radius: 8px;
  --radius-sm: 5px;
  --shadow-pop: 0 10px 30px rgba(31, 36, 48, 0.14), 0 2px 6px rgba(31, 36, 48, 0.08);
  --focus-ring: 0 0 0 3px rgba(16, 18, 22, 0.32);

  /* layout */
  --header-h: 56px;
  --rail-w: 14px;
}