/* ============================================================================
   THE THEME — every look-and-feel knob for the board, in one place.
   Change a value here and the whole board follows. ui/board.css only ever uses
   these names; it never holds a colour of its own.

   The rules this theme follows (research R24 + R46, notes/board_ui_baseline_2026-09-13):
   1. Colour means STATE, never "kind of thing". Four attention levels:
        calm (no colour) · information (blue) · needs a person (amber) · broken (red)
      plus one quiet "done" green. A screen stays under ~5 hues so what matters pops.
   2. Every state also has a SHAPE, so it reads without colour (and pops faster):
        ○ open   ◐ working   ◉ ready   ● done   ◆ a person decides   ▲ broken   ■ information
   3. Clickable things are INK, not a colour — so a colour is never "just a button".
   4. Sections differ by STRUCTURE (rules, grounds, rails), not by hue.
   ============================================================================ */

:root {
  /* --- neutrals: a cool field-notebook grey, faintly green --- */
  --paper:    #eceff0;   /* the page */
  --surface:  #fbfcfc;   /* cards, panels */
  --sunk:     #e2e7e8;   /* wells, the machine room */
  --band:     #f5f6f4;   /* the "needs a person" band */
  --ink:      #151a1c;   /* text, buttons, the heavy rules */
  --graphite: #56636a;   /* secondary text */
  --faint:    #89959b;   /* tertiary text, empty states */
  --hairline: #d3dadd;   /* thin dividers */
  --rule:     #aab4b9;   /* stronger dividers, the route line */

  /* --- state: the only colours on the page --- */
  --broken:       #b4261d;  --broken-soft: #f6e1de;   /* ▲ something is broken; act now */
  --decide:       #9a5a00;  --decide-soft: #f5e7cf;   /* ◆ a person has to decide */
  --info:         #235d8c;  --info-soft:   #deeaf3;   /* ■ worth knowing; nothing to do */
  --done:         #2d6a44;  --done-soft:   #dfede3;   /* ● landed, runs */
  --ring:         #235d8c;                            /* keyboard focus */
  --on-ink:       #fbfcfc;                            /* text on an ink button */
  --scrim:        rgba(10, 14, 16, .42);              /* behind a side panel */

  /* --- a section's divider on the project page: one look for every section, from the neutrals above ---
     A full-width solid slate band with the section's number and name in the page's own light (or, in dark, dark) ink:
     text on it is 6.0:1 in light and 7.5:1 in dark. No hue: sections differ by structure (design rule 4), and the page's
     colours stay for state. Alex chose it over a rule beside the title, which pulled his eye from the progress bars.
     (Alex, 2026-10-03/04.) */
  --section-band:     var(--graphite);   /* the band behind a section's number and name */
  --section-band-ink: var(--on-ink);     /* the number and the name on it */

  /* --- type --- */
  --font-ui:   "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --text-xs:   .72rem;   /* labels, chips */
  --text-sm:   .84rem;   /* secondary lines */
  --text-base: .94rem;   /* body */
  --text-lg:   1.1rem;   /* panel titles, lead lines */
  --text-xl:   1.65rem;  /* the board's name */
  --label-track: .09em;  /* letter-spacing on uppercase labels */
  /* the project page's scale, between and above the sizes above: one step per job */
  --text-md:    1.02rem; /* reading text inside a card or a list line */
  --text-title: 1.25rem; /* a card's or a panel's own title */
  --display-1: clamp(2rem, 4vw, 2.8rem);       /* the project's name */
  --display-2: clamp(1.4rem, 2.6vw, 1.95rem);  /* a slide's one big sentence (the pitch) */
  --display-3: clamp(1.25rem, 2.2vw, 1.55rem); /* a slide's one line, and the question a panel asks */

  /* --- space: one doubling rhythm --- */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.25rem;

  /* --- form --- */
  --radius: 3px;           /* the work board's one corner; the project page uses the scale below */
  /* corners, one radius per kind of thing (the project page, ui/project.css) */
  --r-control: 6px;        /* buttons, inputs, tags, code wells, list rows */
  --r-card:    10px;       /* cards, notes, boxes on the map, drill-downs, pictures */
  --r-panel:   16px;       /* the large panels: the map's canvas, the stage panel */
  --r-pill:    999px;      /* status chips only (a state, a deadline, a badge) */
  --r-dot:     50%;        /* step dots only (the stage's steps, the numbered goals, the live dot) */
  /* what a card is padded with: one for a card, one for a large panel, one for a small note */
  --pad-card:  .85rem 1.1rem;
  --pad-panel: 1rem 1.25rem;
  --pad-note:  .6rem .9rem;
  --shape-size: .95rem;    /* the state marker */
  --rule-heavy: 2px;       /* the masthead and tab rules */
  --panel-width: 42rem;
  --shadow-panel: -12px 0 32px rgba(10, 14, 16, .16);
  --page-width: 78rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111516; --surface: #181d1f; --sunk: #1f2527; --band: #151a1b;
    --ink: #e5eaec; --graphite: #9ba7ad; --faint: #6f7b81; --hairline: #2a3235; --rule: #445056;
    --broken: #f08a7f; --broken-soft: #2f1a17;
    --decide: #e3a650; --decide-soft: #2e2415;
    --info: #80b3de;   --info-soft: #172735;
    --done: #7cc699;   --done-soft: #15291d;
    --ring: #80b3de; --on-ink: #111516; --scrim: rgba(0, 0, 0, .55);
    --shadow-panel: -12px 0 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --paper: #111516; --surface: #181d1f; --sunk: #1f2527; --band: #151a1b;
  --ink: #e5eaec; --graphite: #9ba7ad; --faint: #6f7b81; --hairline: #2a3235; --rule: #445056;
  --broken: #f08a7f; --broken-soft: #2f1a17;
  --decide: #e3a650; --decide-soft: #2e2415;
  --info: #80b3de;   --info-soft: #172735;
  --done: #7cc699;   --done-soft: #15291d;
  --ring: #80b3de; --on-ink: #111516; --scrim: rgba(0, 0, 0, .55);
  --shadow-panel: -12px 0 32px rgba(0, 0, 0, .5);
}