/* Boxes — "loose leaf": a practice app you open the way you open a sketchbook.
   The page is paper, the chrome is a few soft white cards resting on it, and
   there is no theme colour at all: the ink is the brand, so the only saturated
   things on screen are the ones that mean something — the red pencil for the
   correction, green→amber→red for how tight you were, three pencil hues for the
   three axes. Authored in OKLCH, written as hex because the canvas parses these
   values directly (see errColor in main.js). Notes live in DESIGN.md.

   Split out of style.css so the static pages (about, y-generator) can dress
   themselves in the same paper and ink without pulling in the whole app shell. */

:root {
  --sans: 'Avenir Next', Avenir, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* paper & ink — a barely-there cool cast (hue 268, chroma ≤0.02), not a tint */
  --board: #f6f8fb;   /* oklch(97.8% 0.004 268) — the sheet you draw on */
  --bg: #ebeef3;      /* oklch(94.8% 0.008 268) — app ground behind chrome */
  --surface: #fcfcfe; /* oklch(99.2% 0.002 268) — floating chrome, cards */
  --ink: #292e38;     /* oklch(30.0% 0.020 268) — graphite */
  --muted: #595d68;   /* oklch(47.8% 0.018 268) — secondary text, ≥4.5:1 */
  --faint: #828690;   /* oklch(62.0% 0.015 268) — decorative marks only */
  --line: #d8dbe2;    /* oklch(89.0% 0.010 268) */

  /* meaning */
  --brand: #2e394d;   /* oklch(34.5% 0.038 262) — pencil-dark: press it, choose it */
  --accent: #c13c36;  /* oklch(55.0% 0.170 27)  — red pencil: the correction */
  --ok: #3f9557;      /* oklch(60.0% 0.125 150) */
  --warn: #b17714;    /* oklch(61.5% 0.125 74) */
  --bad: #c83d49;     /* oklch(56.5% 0.175 20) */
  --f1: #296eb4;      /* verticals   — blue pencil */
  --f2: #a24b98;      /* left-depth  — plum pencil */
  --f3: #0e7f7c;      /* right-depth — teal pencil */

  --grid: rgba(41, 46, 56, 0.12);
  --shadow: 0 1px 2px rgba(41, 46, 56, .05), 0 8px 20px -10px rgba(41, 46, 56, .16);
  --lift: 0 2px 4px rgba(41, 46, 56, .06), 0 18px 34px -16px rgba(41, 46, 56, .26);
  --press: 0 6px 16px -10px rgba(41, 46, 56, .5);

  /* practice ramp — intensity IS the data, in graphite */
  --l0: color-mix(in srgb, var(--brand) 8%, var(--surface));
  --l1: color-mix(in srgb, var(--brand) 27%, var(--surface));
  --l2: color-mix(in srgb, var(--brand) 48%, var(--surface));
  --l3: color-mix(in srgb, var(--brand) 71%, var(--surface));
  --l4: var(--brand);

  /* shape: friendly but not blobby */
  --r1: 10px;
  --r2: 14px;
  --r3: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* z-scale: canvas 0 · floating chrome 10 · popovers/pickers 20 · recap 30 · views 40 */
}

/* Dark: the same room after sunset — cool graphite, depth from surface
   lightness rather than heavier shadow. The primary fill inverts to pale slate,
   so its text token (--surface) becomes the dark one automatically. */
@media (prefers-color-scheme: dark) {
  :root {
    --board: #1f2024; --bg: #121417; --surface: #2c2e32; --ink: #e6e8ec;
    --muted: #a9acb4; --faint: #7c8089; --line: #41444b;
    --brand: #ccd2dc; --accent: #e8796c;
    --ok: #66c483; --warn: #e3af59; --bad: #f06e6f;
    --f1: #6da5e4; --f2: #d289c8; --f3: #69c1bd;
    --grid: rgba(230, 232, 236, .10);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -10px rgba(0, 0, 0, .55);
    --lift: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 34px -16px rgba(0, 0, 0, .7);
    --press: 0 6px 16px -10px rgba(0, 0, 0, .6);
  }
}
:root[data-theme='light'] {
  --board: #f6f8fb; --bg: #ebeef3; --surface: #fcfcfe; --ink: #292e38;
  --muted: #595d68; --faint: #828690; --line: #d8dbe2;
  --brand: #2e394d; --accent: #c13c36;
  --ok: #3f9557; --warn: #b17714; --bad: #c83d49;
  --f1: #296eb4; --f2: #a24b98; --f3: #0e7f7c;
  --grid: rgba(41, 46, 56, .12);
  --shadow: 0 1px 2px rgba(41, 46, 56, .05), 0 8px 20px -10px rgba(41, 46, 56, .16);
  --lift: 0 2px 4px rgba(41, 46, 56, .06), 0 18px 34px -16px rgba(41, 46, 56, .26);
  --press: 0 6px 16px -10px rgba(41, 46, 56, .5);
}
:root[data-theme='dark'] {
  --board: #1f2024; --bg: #121417; --surface: #2c2e32; --ink: #e6e8ec;
  --muted: #a9acb4; --faint: #7c8089; --line: #41444b;
  --brand: #ccd2dc; --accent: #e8796c;
  --ok: #66c483; --warn: #e3af59; --bad: #f06e6f;
  --f1: #6da5e4; --f2: #d289c8; --f3: #69c1bd;
  --grid: rgba(230, 232, 236, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px -10px rgba(0, 0, 0, .55);
  --lift: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 34px -16px rgba(0, 0, 0, .7);
  --press: 0 6px 16px -10px rgba(0, 0, 0, .6);
}