/* UAA Network: the tokens.
 *
 * ONE SOURCE OF TRUTH for color, type and spacing, read by the public site
 * and the operator console alike. The sibling project redeclared its brand
 * colors inside the console's own stylesheet, so the two drifted apart and
 * nobody noticed until a button was the wrong green in one of them. There is
 * one file here on purpose.
 *
 * WCAG 2.2 AA IS BUILT IN, NOT CHECKED AFTERWARDS. Five pairs in the design
 * this implements fell below 4.5:1 — the hero note, the metric labels, the
 * article dates and categories, and white text on the accent gold. Each is
 * corrected here by the smallest amount that passes, so the look is intact
 * and the contrast is not a matter of opinion. `dev/tests/test_contrast.py`
 * recomputes every pair and fails the build rather than trusting this note.
 */

:root {
  /* ── Paper ──────────────────────────────────────────────────────────── */
  --paper:         #F7F3E9;   /* the page                                  */
  --paper-raised:  #FBF8F0;   /* metric strip, cards, anything lifted      */
  --paper-sunk:    #F1ECDF;   /* wells, code blocks, inset panels          */
  --paper-warm:    #F9F6ED;   /* alternating band                          */
  --white:         #FFFDF6;

  /* ── Ink ────────────────────────────────────────────────────────────── */
  --ink:           #17261F;   /* headings, the darkest text                */
  --forest:        #07392E;   /* dark sections, footer                     */
  --forest-deep:   #052E26;
  --forest-lit:    #0E5443;   /* the lit edge of the book-check gradient   */
  --forest-pale:   #E7EFEA;

  /* ── Gold ───────────────────────────────────────────────────────────── */
  /* TWO GOLDS, AND THE DIFFERENCE IS LOAD-BEARING. `--gold` is the accent:
   * rules, numerals, small marks, where it sits on paper and carries no
   * text. `--gold-ink` is the one a white label goes on, darkened until
   * white passes 4.5:1 — the design's single gold gave 4.05, which is a
   * button nobody with low vision can read. */
  --gold:          #967B35;
  --gold-ink:      #8E732D;
  --gold-dark:     #806729;   /* hover; darker still, so it stays legible  */
  --gold-pale:     #F3EEDF;
  --gold-text:     #846D2F;   /* gold link text on paper, 4.50:1           */
  --on-gold:       #FFFFFF;   /* the label ON a gold button                */
  /* GOLD IS TOO DARK TO BE TEXT ON A DARK GROUND: #967B35 on the ink is
   * 3.89:1. Nothing currently sets it there, and that is exactly the kind of
   * thing somebody does later without measuring, so the passing value exists
   * and is the one the dark sections reference. */
  --gold-on-ink:   #C9A54A;
  /* THE BANNER'S BRASS RUNS RATHER THAN SITS. The design paints its two
   * buttons as a gradient from a deep olive brass to a light one; white on
   * that light end measures 3.4:1, so the run ends at `--gold-ink`, the
   * darkest gold in this file and the one already proven for white labels.
   * The move survives, the failure does not. */
  --brass-run:     linear-gradient(100deg, #7A6224 0%, #8E732D 100%);
  --gold-hairline: #BFA469;   /* the outlined button's rule, on the plate  */
  --eyebrow-on-ink: #B9CBBF;

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text:          #17261F;
  --text-mid:      #506159;   /* body copy, 5.93:1 on paper                */
  --text-soft:     #6A7168;   /* small print, 4.54:1 — was #899087 (2.96)  */
  --text-on-ink:      #FFFFFF;
  --text-on-ink-soft: #D8E0DA;
  --link-on-ink:      #E6D9AE;
  --border-on-ink:    #D0C49F;   /* the ghost button's edge on a dark ground */
  --on-ink-muted:     #9DB1A7;   /* footer column headings, the legal line   */

  /* ── Lines ──────────────────────────────────────────────────────────── */
  /* Structure comes from hairlines rather than from boxes and shadows. */
  --line:          #D7D1C3;
  --line-strong:   #BDB49F;
  --line-soft:     #E4DFD2;
  --ink-line:      rgba(255, 255, 255, .14);

  /* ── State ──────────────────────────────────────────────────────────── */
  --ok:            #2C6B4F;
  --danger:        #A32E22;
  --danger-pale:   #FBEDEB;
  --brass:         var(--gold);       /* the previous name for the accent  */

  /* ── Type ───────────────────────────────────────────────────────────── */
  /* Libre Caslon Display for anything that carries authority, DM Sans for
   * everything that carries information. Both self-hosted and subset: no
   * request leaves this origin for a font, which is a privacy property as
   * well as a performance one. */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-ui:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Fluid, and clamped at both ends: the floor keeps a phone readable, the
   * ceiling stops a 4K display rendering a headline the height of a door. */
  /* THE MOCKUP'S HEADLINE, AT THE MOCKUP'S PROPORTION. Its rule is
   * `clamp(48px, 6.2vw, 80px)` — but it is a 2172px-wide render, so 6.2vw
   * clamps to 80px there, which is 3.7% of the width. Copied literally into
   * a 1440px browser, 6.2vw is 89px: the headline lands a third larger than
   * the design, wraps to four lines, and pushes the band so tall that the
   * picture crops the globe away. Scaled to the same PROPORTION instead. */
  --size-display: clamp(2.125rem, 3.2vw, 3.75rem);
  --size-h2:      clamp(1.875rem, 3.2vw, 2.6875rem);
  --size-h3:      1.5625rem;
  --size-lead:    1rem;
  --size-body:    0.9375rem;
  --size-small:   0.8125rem;
  --size-label:   0.6875rem;

  --leading-tight: 0.96;
  --leading-snug:  1.12;
  --leading-body:  1.6;
  --tracking-label: 0.22em;

  /* ── Space ──────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 5rem;

  /* ── Measure and frame ──────────────────────────────────────────────── */
  --measure:       68ch;
  --measure-tight: 52ch;
  --page-max:      1180px;
  --gutter:        clamp(1rem, 4vw, 1.75rem);

  --radius:    10px;
  --radius-sm: 4px;
  --shadow:       0 20px 60px rgba(8, 37, 29, .12);
  --shadow-lift:  0 8px 18px rgba(142, 115, 45, .22);
  --transition: 180ms ease;
}

/* ── One light world, deliberately ────────────────────────────────────────
 *
 * There is no dark theme, and that is a decision rather than an omission.
 *
 * This brand is warm paper, forest and gold: a photograph fading into cream,
 * hairlines the color of aged stock, a serif cut for print. Inverted, none
 * of that survives — the paper becomes a gray-green ground, the gold goes
 * muddy, and the photographs that the hero and the cards are built around
 * sit on a field they were never shot for. A dark variant of this identity
 * is a design project, not a token flip, and shipping the flip produced a
 * site that looked nothing like the one that was approved.
 *
 * `color-scheme: light` is the part that makes the commitment honest: it
 * tells the browser to render form controls, scrollbars and the canvas in
 * light regardless of the operating system, so a visitor in dark mode gets
 * this design rather than this design with the browser's own dark widgets
 * pushed through it.
 */
:root { color-scheme: light; }

/* MOTION IS A PREFERENCE, NOT A DECISION THIS SITE GETS TO MAKE. Every
 * transition and transform in the stylesheet reads `--transition`, so
 * neutralising it here is enough to honor the request everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 1ms linear; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    /* THE DELAY MATTERS AS MUCH AS THE DURATION, and leaving it out is a
     * quiet accessibility bug. An entrance animation uses
     * `animation-fill-mode: backwards`, which applies the FROM state during
     * the delay — so an element with a 1.85s delay and a 1ms duration is
     * invisible for 1.85 seconds and then appears, for precisely the people
     * who asked for less movement. A negative delay starts every animation
     * already finished. */
    animation-delay: -1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}