/* Newsprint design tokens: the palette, type and spacing of richard4912.us, shared by every application.
   Source of truth: packages/ui/tokens.css. Applications hold a copy made by scripts/sync-ui.sh; edit this file, not the copy.

   Colours are named for their role on the printed page, so they keep their meaning in the night edition: --paper is
   always the ground and --ink always the text, whichever way round they are. A page opts into the night edition with
   <html data-theme="auto">, which follows the reader's system setting (newsprint.css). test/tokens.test.js checks every
   text and control pairing below against WCAG AA in both editions. */
:root {
  /* ---------- Colour, day edition */
  --paper: #f3f0e7;
  --paper-deep: #e8e2d4;
  --surface: #fffdf7;
  --ink: #171717;
  --muted: #5b574e;
  --line: rgba(23, 23, 23, 0.28);
  --line-strong: rgba(23, 23, 23, 0.78);

  --coral: #ef5b4c;      /* the brand mark: fills, rules and display-size marks, never small text */
  --coral-ink: #bf3a2c;  /* coral that small text can be set in */
  --teal: #158e91;       /* focus rings, rules and meters */
  --teal-ink: #106568;   /* links, and fills that carry --paper text */
  --acid: #d6e85f;       /* highlighter: stamps, selection, the accent button */
  --acid-deep: #c6d84f;
  --on-bright: #171717;  /* text on --acid and --coral, which stay bright in both editions */

  /* States. Each text colour meets 4.5:1 on --paper, --surface and its own -soft ground. */
  --good: #1f6a43;
  --warn: #8a5300;
  --warn-soft: #f6ecd2;
  --bad: #af3025;
  --bad-deep: #89261e;
  --bad-soft: #f4d6cc;

  --scrim: rgba(23, 23, 23, 0.45);
  --grid-line: rgba(23, 23, 23, 0.025);

  /* ---------- Type. Playfair sets reading text and headlines; Space Mono sets labels, figures and controls. */
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --serif-text: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;  /* paragraphs and typed messages: Playfair's hairlines thin out below display size */

  --text-label: 0.6875rem;  /* 11px, the floor: upper-case mono only (chips, table heads, eyebrows) */
  --text-control: 0.75rem;  /* 12px: upper-case mono on buttons, field labels and the masthead */
  --text-sm: 0.875rem;      /* captions, notes, code */
  --text-md: 1rem;          /* reading text */
  --text-reading: 1.1rem;   /* the body of a message or article, set in --serif-text */
  --text-lg: 1.125rem;      /* h3, lead paragraphs */
  --text-xl: 1.375rem;      /* h2 */
  --text-2xl: 2rem;         /* figures, dialog titles */
  --text-display: clamp(2.4rem, 6vw, 4.6rem);  /* h1 */

  --leading-tight: 0.95;  /* display headlines */
  --leading-snug: 1.25;   /* headings, labels, controls */
  --leading-body: 1.55;   /* reading text */
  --tracking-caps: 0.08em;
  --measure: 68ch;        /* the longest comfortable line of reading text */

  /* ---------- Space: --space-N is N quarter-rems, so 4 is 1rem. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* The smallest box a pointer has to hit; 2.75rem (44px) on touch screens (newsprint.css). */
  --control-height: 2.25rem;

  /* ---------- Depth. The offset "printed card" shadow, and the stacking order of everything that floats. */
  --shadow-card: 4px 4px 0 var(--paper-deep), 5px 5px 0 var(--ink);
  --shadow-pop: 6px 6px 0 var(--ink);
  --z-raised: 10;   /* sticky headers, a dragged item */
  --z-grain: 30;    /* the paper grain sits over the page but under anything that floats */
  --z-overlay: 40;  /* trays and drawers */
  --z-toast: 50;
  --z-banner: 60;

  /* ---------- Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-med: 220ms;
}

/* The night edition. light-dark() picks the first value under color-scheme: light and the second under dark, so these
   apply only where newsprint.css (or the page) sets color-scheme to dark or "light dark". The first values repeat the
   day edition above; test/tokens.test.js fails if they drift apart. Browsers without light-dark() keep the day edition. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#f3f0e7, #151412);
    --paper-deep: light-dark(#e8e2d4, #262420);
    --surface: light-dark(#fffdf7, #1d1c19);
    --ink: light-dark(#171717, #ece7da);
    --muted: light-dark(#5b574e, #a8a193);
    --line: light-dark(rgba(23, 23, 23, 0.28), rgba(236, 231, 218, 0.22));
    --line-strong: light-dark(rgba(23, 23, 23, 0.78), rgba(236, 231, 218, 0.62));

    --coral-ink: light-dark(#bf3a2c, #ff8b7c);
    --teal: light-dark(#158e91, #2aa9ac);
    --teal-ink: light-dark(#106568, #6fcfd1);
    --acid-deep: light-dark(#c6d84f, #e3f07c);

    --good: light-dark(#1f6a43, #72c995);
    --warn: light-dark(#8a5300, #e6ac4f);
    --warn-soft: light-dark(#f6ecd2, #352a14);
    --bad: light-dark(#af3025, #ff7a69);
    --bad-deep: light-dark(#89261e, #ff9b8e);
    --bad-soft: light-dark(#f4d6cc, #3b1f1a);

    --scrim: light-dark(rgba(23, 23, 23, 0.45), rgba(0, 0, 0, 0.6));
    --grid-line: light-dark(rgba(23, 23, 23, 0.025), rgba(236, 231, 218, 0.03));
  }
}