/* Design tokens — extracted verbatim from design/README.md ("Design tokens"), the
   Claude Design handoff for the study app. That file is the authority; this one
   is its machine-readable copy. Change a value there first, then here.
   Rules the handoff states that a token cannot carry: zero border-radius
   everywhere (including scrollbar thumbs); no imagery; no decorative shadows
   except the two named below; labels flush left, uppercase, letter-spaced.
   Where the handoff gives a range (ink alphas .55–.6 and .28–.3, the strong divider .25–.28, label tracking
   .12–.14em, editor 12.5–13px at 1.75–1.8), the value here is one choice inside it. A handoff row naming
   several values (ink and its alphas, the button and its hover and pressed, a wash and its ring or amber)
   is split into one token each, and a use note is shortened ("PDF/page area" to "page area").
   Contrast (M3 contract section 8, decision 1, owner-approved 2026-09-29): five text pairs of the handoff fail
   WCAG 2.2 AA (4.5:1). Each keeps its hue and is raised only to the least value that passes on every ground it
   sits on; the handoff's value stays beside it as "handoff <value>". tools/tests/test_m3c_contrast.py computes
   every text/ground pair below from this file, the three washes behind text (--text-selection, --highlight-wash,
   --selection-wash) composited over their grounds; --ink-disabled, inactive text, is exempt there as everywhere.
   Selection (decision 1a, owner-approved 2026-09-30): --text-selection keeps its coral hue and is made fainter
   only to the least change that passes (handoff .3 put 27 pairs below AA), every text token passing under it
   but the four decision 1 raised to their least passing value (--ink-label, --ink-hint, --paper-muted,
   --accent-on-paper), which fail under any tint above .01 and keep the browser's native selection. The two paper washes keep the handoff's alphas
   (gate 5, M4Ae): --paper-ink passes under both; a key term's --accent-on-paper passes under no visible tint of
   either, so chapter.html draws a term under a wash in --paper-ink; no other paper text lies under one. */
:root {
  /* Colors: dark ground */
  --bg: #231e18;                 /* app background, home, panes */
  --bg-reader-well: #1e1a14;     /* page area behind the paper */
  --bg-editor: #191510;          /* code editor surfaces */
  --bg-editor-tabbar: #14100c;   /* file-tab strip above editor */
  --bg-raised: #26211a;          /* action bar, command palette panel */
  /* Colors: paper */
  --paper: #f0e9d9;              /* the reading page (cream) */
  --paper-ink: #2b241a;          /* text on paper */
  --paper-rule: #b8a988;         /* code-block left rule, table header rule (2px) */
  --paper-rule-light: #d8cdb4;   /* table row rules (1px) */
  --paper-muted: #746853;        /* kicker / page number on paper; handoff #8a7c62 (3.38:1), darkened along its hue */
  --paper-label: #6d5f45;        /* table header labels on paper */
  /* Colors: text on dark */
  --ink: #ece4d4;                /* primary text on dark */
  --ink-body: rgba(236,228,212,.78);
  --ink-secondary: rgba(236,228,212,.58);
  --ink-label: rgba(236,228,212,.53);   /* handoff .45 (3.69:1 on --bg-raised); .52 is 4.45:1 there */
  --ink-hint: rgba(236,228,212,.53);    /* handoff .38 (3.03:1 on --bg-raised) */
  --ink-disabled: rgba(236,228,212,.29);   /* inactive text: exempt from 1.4.3 */
  /* Colors: accent */
  --accent: #ff9783;             /* current section, progress bars, streak, active tab */
  --accent-hover: #ffc4b8;       /* link / accent hover */
  --accent-button: #ff563c;      /* primary buttons: CONTINUE, RUN, LOG DAY */
  --accent-button-hover: #dd2b0f;
  --accent-button-pressed: #ae1800;
  --accent-button-ink: #2b241a;  /* primary-button text at rest (--paper-ink, 4.85:1); handoff #ffffff (3.16:1) */
  --accent-button-ink-strong: #ffffff;   /* its text on hover (4.74:1) and pressed (7.17:1), where --paper-ink fails */
  --accent-on-paper: #b54520;    /* key terms, MARK SECTION READ, annotation numbers; handoff #c34a22 (4.02:1), darkened along its hue */
  --amber: #d6a435;              /* highlight action, local-run badge */
  --highlight-wash: rgba(214,164,53,.32);   /* text highlight on paper */
  --selection-wash: rgba(236,48,19,.14);    /* selected sentence(s) */
  --selection-ring: rgba(236,48,19,.35);    /* 1px ring around the selection */
  --run-output: #a8dcb5;         /* stdout text */
  --divider-quiet: rgba(236,228,212,.1);    /* 1px */
  --divider-strong: rgba(236,228,212,.27);  /* 2px: tab bar, dashboard columns */
  --editor-text: #ded5c2;
  --scrollbar-thumb: rgba(236,228,212,.18);
  --text-selection: rgba(255,151,131,.08);  /* ::selection; handoff .3 (27 pairs below AA), fainter along its hue */
  --palette-overlay: rgba(22,19,15,.65);
  /* Typography */
  --font-ui: "Archivo", sans-serif;            /* chrome: tabs, labels, buttons */
  --font-reading: "Source Serif 4", serif;      /* paper text, titles, notes, prompts */
  --font-code: "JetBrains Mono", monospace;     /* code, shortcuts, numbers, metadata */
  --label-size: 10px;            /* 600, letter-spacing .12–.14em, uppercase, flush left */
  --label-tracking: .13em;
  --paper-title-size: 24px;      /* 600 serif */
  --paper-body-sizes: 13px 14.5px 16.5px;   /* user-adjustable, line-height 1.7 */
  --paper-line-height: 1.7;
  --editor-size: 13px;           /* mono, line-height 1.75–1.8 */
  --editor-line-height: 1.78;
  --status-size: 10.5px;         /* mono */
  /* Structure */
  --radius: 0;                   /* zero everywhere */
  --tabbar-height: 52px;         /* bottom rule 2px */
  --statusbar-height: 34px;      /* top rule 2px */
  --sidebar-width: 264px;
  --right-pane-width: 360px;
  --prompt-pane-width: 440px;
  --rail-width: 40px;
  --paper-width: 540px;
  --paper-padding: 52px 56px;
  --paper-shadow: 0 2px 20px rgba(0,0,0,.45);
  --palette-shadow: 0 12px 40px rgba(0,0,0,.5);
  --palette-width: 540px;
  --scrollbar-size: 8px;
  /* Motion (deliberately quiet) */
  --checkpop: .5s ease;          /* scale .3 → 1.25 → 1 */
  --fadein: .3s ease;            /* fade + 6px rise */
  --bar-motion: width .6s ease;
  --sentence-motion: background .25s ease;
}