/* AutoMin design tokens (plain CSS custom properties, ADR-0003).

   Colour schemes (ADR-0035: light by default, dark follows the phone):
     - light is the default, set on :root and on any [data-theme="light"] element;
     - dark applies when the phone prefers it (and nothing forces light), and on any
       [data-theme="dark"] element. The style page uses data-theme to show both
       schemes side by side.
   The two dark blocks MUST be identical; tools/check.mjs enforces that, and also
   checks every foreground/background pair below against WCAG 2.2 AA.

   Naming: "--on-X" is the text colour to use on a surface filled with X. */

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

  /* Surfaces */
  --bg: #f6f9f7;
  --surface: #ffffff;
  --surface-sunken: #e9f0eb;

  /* Text */
  --text: #14201a;
  --text-muted: #46564d;

  /* Lines: --border is decoration, --border-strong marks controls (3:1) */
  --border: #c9d6ce;
  --border-strong: #66776d;

  /* Brand green. --accent is the AtBice green used as a fill; it is too light
     for text on white, so --accent-text is the same hue, darkened. */
  --accent: #3fbf7a;
  --on-accent: #0d2016;
  --accent-hover: #35a869;
  --accent-text: #1b7243;
  --accent-soft: #dff3e8;
  --focus-ring: #1b7243;

  /* Status */
  --danger-fill: #b3261e;
  --danger-fill-hover: #961f18;
  --on-danger-fill: #ffffff;
  --danger-text: #a3201a;
  --danger-soft: #fbe9e7;
  --warning-text: #7a4b00;
  --warning-soft: #fff1d6;
  --warning-border: #b8770a;

  /* Progress bar */
  --progress-track: #dbe5de;
  --progress-fill: #1b7243;

  /* Shadow */
  --shadow: 0 1px 2px rgb(20 32 26 / 0.08), 0 4px 16px rgb(20 32 26 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #0f1713;
    --surface: #17211b;
    --surface-sunken: #0b110e;

    --text: #e9f1ec;
    --text-muted: #a9bab0;

    --border: #2c3a32;
    --border-strong: #7f9487;

    --accent: #3fbf7a;
    --on-accent: #0d2016;
    --accent-hover: #55d08e;
    --accent-text: #6fd9a0;
    --accent-soft: #1b3326;
    --focus-ring: #6fd9a0;

    --danger-fill: #e5564d;
    --danger-fill-hover: #f07068;
    --on-danger-fill: #1a0807;
    --danger-text: #ff9e96;
    --danger-soft: #3a1815;
    --warning-text: #f5c26b;
    --warning-soft: #33260c;
    --warning-border: #b8770a;

    --progress-track: #2c3a32;
    --progress-fill: #3fbf7a;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
  }
}

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

  --bg: #0f1713;
  --surface: #17211b;
  --surface-sunken: #0b110e;

  --text: #e9f1ec;
  --text-muted: #a9bab0;

  --border: #2c3a32;
  --border-strong: #7f9487;

  --accent: #3fbf7a;
  --on-accent: #0d2016;
  --accent-hover: #55d08e;
  --accent-text: #6fd9a0;
  --accent-soft: #1b3326;
  --focus-ring: #6fd9a0;

  --danger-fill: #e5564d;
  --danger-fill-hover: #f07068;
  --on-danger-fill: #1a0807;
  --danger-text: #ff9e96;
  --danger-soft: #3a1815;
  --warning-text: #f5c26b;
  --warning-soft: #33260c;
  --warning-border: #b8770a;

  --progress-track: #2c3a32;
  --progress-fill: #3fbf7a;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
}

/* Scheme-independent tokens. Sizes are in rem so the browser's own text-size
   setting scales everything. "Large by default": the base is 1.25rem (20px at
   the default browser size) and controls are at least 3.5rem (56px) tall. */
:root {
  --font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-sm: 1rem;
  --text-base: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.5rem;

  --leading-body: 1.55;
  --leading-heading: 1.2;

  --weight-regular: 400;
  --weight-strong: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --control-height: 3.5rem;
  --border-width: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;

  --measure: 40rem;
  --transition: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}