/* The only place a literal value lives.
   Named by role, never by appearance: --accent, not --blue. See DESIGN.md. */

:root {
  /* ground -- ledger paper. Pale, cool, faintly green. Not cream, not grey. */
  --paper:        #e8ede4;
  --paper-sunk:   #dbe3d6;
  --rule:         #75836f;   /* meaningful borders. 3.38:1 on paper. */
  --rule-faint:   #c2ccbb;   /* striping only, never a boundary that matters */
  --rule-strong:  #141a12;
  --plate:        #141a12;   /* the plate a shelf stands on */

  --ink:          #141a12;
  --ink-muted:    #5a6455;
  --ink-on-cards: #141a12;   /* amber carries dark ink in both modes */
  --ink-on-full:  #e8ede4;

  /* LA4O's blue, inherited. Structural only: header, links, focus, selection. */
  --accent:       #155398;
  --accent-press: #0f3c70;
  --focus:        #155398;

  /* the only place colour carries meaning */
  --state-cards:  #d98b00;
  --state-full:   #98261a;
  --state-closed: #7d8878;

  /* Not a state a shelf can be in: the one colour free to mean "here". */
  --found:        #58c47a;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --radius: 0px;
  --tap: 44px;

  --face-ui:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --face-call: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* One cell. Set on the wall from the viewport so the whole shelf is visible
     at once; this is only the fallback for anything drawn outside it. */
  --cell-h: 44px;
  /* Masthead, column header and the page's own padding: what the wall does not
     get to use. Measured, not guessed -- a test fails if it drifts. */
  --wall-chrome: 116px;
  --cell-min: 22px;
  --col-w:  108px;

  /* Left to the system until somebody chooses. What this drives is the parts
     the browser draws itself -- form fields, scrollbars -- so a chosen theme
     has to pin it, or those stay in the system's theme while the page is in
     the other one. */
  color-scheme: light dark;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #10150f;
    --paper-sunk:   #182016;
    --rule:         #5a6851;   /* 3.11:1 on the dark ground */
    --rule-faint:   #262f23;
    --rule-strong:  #e8ede4;
    /* Not the strong ink: a bright line under every cell reads as a grid drawn
       over the wall rather than as the plate it stands for. */
    --plate:        #4a5643;
    --ink:          #e8ede4;
    --ink-muted:    #8b9686;
    --accent:       #5a9fe0;
    --accent-press: #7ab4ea;
    --focus:        #5a9fe0;   /* follows the accent, or the ring stays the
                                  light-mode blue: 2.4:1 on this ground */
    --state-cards:  #c98500;   /* lifted, so dark ink still passes */
    --state-full:   #a82e23;
    --found:        #2f8f4e;
  }
}

:root[data-theme="dark"] {
  --paper:        #10150f;
  --paper-sunk:   #182016;
  --rule:         #5a6851;
  --rule-faint:   #262f23;
  --rule-strong:  #e8ede4;
  --plate:        #4a5643;
  --ink:          #e8ede4;
  --ink-muted:    #8b9686;
  --accent:       #5a9fe0;
  --accent-press: #7ab4ea;
  --focus:        #5a9fe0;
  --state-cards:  #c98500;
  --state-full:   #a82e23;
  --found:        #2f8f4e;
}