/* SPDX-FileCopyrightText: 2026 Kartoza
 * SPDX-License-Identifier: MIT
 *
 * Design tokens.
 *
 * The palette comes from the subject itself. Portuguese students draw an épura
 * with two coloured pencils: one for what belongs to the floor and one for what
 * belongs to the wall. That pairing — a warm sienna for everything on the
 * horizontal plane, a cool indigo for everything on the frontal plane — is the
 * whole colour system, and it is used identically in the drawings, in the faint
 * tint of the two halves of the page, and in the notation printed in the prose.
 * A student who forgets which subscript is which can recover it from the colour
 * of the ink, in the sentence they are reading.
 *
 * Nothing else in the interface is allowed to use those two hues.
 */

:root {
  /* --- the two projection hues, the heart of the system ------------------ */
  --floor: #b0491c;          /* horizontal plane, subscript 1, below the line */
  --floor-soft: #e8d3c8;
  --floor-wash: #b0491c14;
  --floor-plane: #b0491c;
  --wall: #2b4a94;           /* frontal plane, subscript 2, above the line */
  --wall-soft: #ccd6ea;
  --wall-wash: #2b4a9414;
  --wall-plane: #2b4a94;

  /* --- surface and ink --------------------------------------------------- */
  --paper: #f6f8fa;          /* drafting film, cool rather than parchment */
  --paper-raised: #ffffff;
  --paper-sunken: #eceff3;
  --ink: #16212e;
  --ink-muted: #566577;
  --ink-faint: #8d9aa9;
  --rule: #c9d2dc;
  --rule-strong: #16212e;

  /* --- a third voice, for "the other object" in a drawing ---------------- */
  --accent: #6a4a9c;
  --accent-soft: #e2dcf0;
  --bissector-odd: #7b6bb0;
  --bissector-even: #4c8f8a;

  /* --- feedback. Wrong answers are never red: red is the floor, and a
         frightened student does not need to be shouted at. ---------------- */
  --yes: #1c6f4a;
  --yes-soft: #d7ece1;
  --almost: #9a6b09;
  --almost-soft: #f6e9c9;
  --not-yet: #566577;
  --not-yet-soft: #e4e8ee;
  --danger: #98311f;

  /* --- type -------------------------------------------------------------- */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Monospace is the vernacular of drafting annotation, so it carries the
     interface's identity: eyebrows, step numbers, coordinates, notation. */
  --font-mark: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: 1.8125rem;
  --step-4: 2.375rem;
  --step-5: 3rem;

  /* --- space, on a 4px grid --------------------------------------------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px #16212e14, 0 8px 24px #16212e0f;
  --shadow-lift: 0 2px 4px #16212e1a, 0 14px 34px #16212e14;

  --measure: 62ch;
  --header-height: 3.75rem;
  --footer-height: 2.75rem;

  --motion-fast: 120ms;
  --motion: 220ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  color-scheme: light;
}

/* Dark: the drafting film becomes a lightbox seen at night. The two hues are
   lifted rather than swapped, so the code the student has learned still holds. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --floor: #f0885a;
    --floor-soft: #4a2b1c;
    --floor-wash: #f0885a1f;
    --floor-plane: #8a4526;
    --wall: #8fabe8;
    --wall-soft: #22314f;
    --wall-wash: #8fabe81f;
    --wall-plane: #3c5486;
    --paper: #101720;
    --paper-raised: #17202b;
    --paper-sunken: #0b1118;
    --ink: #e4ebf2;
    --ink-muted: #9aa8b8;
    --ink-faint: #6b7a8b;
    --rule: #2b3846;
    --rule-strong: #e4ebf2;
    --accent: #b39bea;
    --accent-soft: #2e2545;
    --bissector-odd: #a294dd;
    --bissector-even: #6cb8b2;
    --yes: #5ec394;
    --yes-soft: #14342a;
    --almost: #e5b95c;
    --almost-soft: #3a2f14;
    --not-yet: #9aa8b8;
    --not-yet-soft: #1d2733;
    --danger: #e58273;
    --shadow: 0 1px 2px #0006, 0 8px 24px #0008;
    --shadow-lift: 0 2px 4px #0007, 0 14px 34px #00000099;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --floor: #f0885a;
  --floor-soft: #4a2b1c;
  --floor-wash: #f0885a1f;
  --floor-plane: #8a4526;
  --wall: #8fabe8;
  --wall-soft: #22314f;
  --wall-wash: #8fabe81f;
  --wall-plane: #3c5486;
  --paper: #101720;
  --paper-raised: #17202b;
  --paper-sunken: #0b1118;
  --ink: #e4ebf2;
  --ink-muted: #9aa8b8;
  --ink-faint: #6b7a8b;
  --rule: #2b3846;
  --rule-strong: #e4ebf2;
  --accent: #b39bea;
  --accent-soft: #2e2545;
  --bissector-odd: #a294dd;
  --bissector-even: #6cb8b2;
  --yes: #5ec394;
  --yes-soft: #14342a;
  --almost: #e5b95c;
  --almost-soft: #3a2f14;
  --not-yet: #9aa8b8;
  --not-yet-soft: #1d2733;
  --danger: #e58273;
  --shadow: 0 1px 2px #0006, 0 8px 24px #0008;
  --shadow-lift: 0 2px 4px #0007, 0 14px 34px #00000099;
  color-scheme: dark;
}

:root[data-text-size="large"] {
  --step-0: 1.1875rem;
  --step-1: 1.375rem;
  --step-2: 1.6875rem;
  --step-3: 2.0625rem;
  --step-4: 2.625rem;
  --measure: 56ch;
}