/* ===================================================================
   Design tokens

   Colors, type, radius and shadow are named here so a component reaches
   for a token instead of picking its own number. Not every value in the
   sheets that follow is tokenized -- a handful of provision/diff measures
   are tuned to the character, not the scale, and stay literal where they
   are declared, with the reasoning beside them. ================== */

:root {
  --bg: #fbfaf7;
  --panel: #ffffff;
  --ink: #1d1b17;
  --muted: #6b6558;
  --faint: #938d80;
  --rule: #e3ddd1;
  --accent: #7a5c2e;
  --accent-soft: #f0e6d4;
  --note: #b8860b;
  --note-bg: #fdf7e6;
  --bad: #b3261e;
  --good: #2da44e;
  --added: #4a8f4a;
  --removed: #b05555;
  --ins-bg: #dff0d8;
  --ins-ink: #234d23;
  --del-bg: #f6dcdc;
  --del-ink: #6f2222;

  --shadow: 0 6px 28px rgba(40, 32, 18, .13);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);

  --serif: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Radius: pick the step that matches the element's own size, not its
     content -- a small control gets --radius-sm whatever sits inside it. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* Spacing: the steps that actually recur across the chrome (menus, bars,
     forms, cards). A value that appears once, tuned to its own element, is
     left as a literal beside the rule it belongs to -- see provisions.css
     and diff.css for the hierarchy's own interval tokens. */
  --space-1: .15rem;
  --space-2: .25rem;
  --space-3: .35rem;
  --space-4: .5rem;
  --space-5: .6rem;
  --space-6: .75rem;
  --space-7: .85rem;
  --space-8: 1rem;
  --space-9: 1.2rem;
  --space-10: 1.5rem;
  --space-11: 2rem;

  /* Type: the sizes UI chrome actually uses -- labels, meta, buttons, menus.
     Statute text (body, headings) sets its own sizes; it is prose, not UI. */
  --text-3xs: .68rem;
  --text-2xs: .74rem;
  --text-xs: .78rem;
  --text-sm: .82rem;
  --text-base: .86rem;
  --text-md: .88rem;
  --text-lg: .95rem;

  /* The three measurements the provision layout is built from: the left gutter
     the marker sits in, the right one the ⋯ button sits in, and the step a
     subdivision indents by.  They are variables because a nested provision has
     to do arithmetic with them, and because the narrow layout retunes all
     three at once.

     All three are as small as their job allows, because they are what the
     measure is left over from: the gutter is wide enough for the markers that
     actually recur -- "(A)", "(12)" -- and a long roman spills leftward out of
     it by design, and the step is the smallest shift that still reads as one,
     since it is charged once per level and §1129(b)(2)(A)(i)(I) is five levels
     down. */
  --gutter: 2.5rem;
  --gutter-r: 1.75rem;
  --step: 1.15rem;

  /* The height of the sticky chrome stacked at the top of a wide-screen page
     -- the top bar plus the breadcrumb bar beneath it (nav.css), both
     `position: sticky` -- and what that leaves a wide-screen sidebar or
     outline to clear (sidebar.css, panels.css). Measured off the rendered
     bars rather than derived from their own tokens: between them is a search
     input, a corpus switcher and the crumbs' own line-height, none of which
     reduces to round arithmetic. */
  --chrome-h: 5.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16150f;
    --panel: #1e1d16;
    --ink: #e8e3d6;
    --muted: #a29a88;
    --faint: #7d7566;
    --rule: #33301f;
    --accent: #d3ab6a;
    --accent-soft: #2b2618;
    --note: #d3ab6a;
    --note-bg: #241f12;
    --bad: #ff6b60;
    --shadow: 0 6px 28px rgba(0, 0, 0, .5);
    --ins-bg: #1f3a1f;
    --ins-ink: #cfe9cf;
    --del-bg: #3d1f1f;
    --del-ink: #efd0d0;
  }
}