/*
 * Design tokens.
 *
 * Brand colours are re-declared at runtime by applyBrand() as inline custom
 * properties on :root, which beats these defaults without needing !important.
 * Everything here is the neutral fallback.
 */

:root {
  color-scheme: light dark;

  /* Surfaces and text — overridden per tenant */
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-surface-sunken: #f1f3f9;
  --color-text: #14181f;
  --color-muted: #5c6675;
  --color-border: #dde2ec;
  --color-border-soft: #e9edf4;
  --color-primary: #2f5bd7;
  --color-primary-contrast: #ffffff;
  --color-primary-soft: #eef2fd;

  /* Feedback palette. Each pairs with an icon and a text label — colour is
     never the only signal. Contrast is checked against --color-surface. */
  --correct: #0f7a48;
  --correct-soft: #edf9f2;
  --correct-line: #a3ddc0;

  --missed: #1f6feb;
  --missed-soft: #eef4ff;
  --missed-line: #a8c6f5;

  --worth: #6d3bd4;
  --worth-soft: #f5f1ff;
  --worth-line: #c9b4f5;

  --incorrect: #4a5464;
  --incorrect-soft: #f3f5f8;
  --incorrect-line: #cfd6e0;

  --not-recommended: #b45d09;
  --not-recommended-soft: #fdf5eb;
  --not-recommended-line: #f0c891;

  --unsafe: #c2312b;
  --unsafe-soft: #fdf1f0;
  --unsafe-line: #f3b3af;

  /* Type scale. The question title is deliberately ~28% smaller than the
     previous version, which pushed the answer list below the fold. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-display: clamp(1.75rem, 1.35rem + 1.7vw, 2.4rem);
  --size-question: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-tiny: 0.8125rem;

  --leading-tight: 1.25;
  --leading-body: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius: 10px;
  --radius-lg: 16px;

  --shadow-panel: 0 1px 2px rgb(16 24 40 / 4%), 0 8px 24px -12px rgb(16 24 40 / 10%);

  --tap-target: 44px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f1319;
    --color-surface: #171c25;
    --color-surface-sunken: #1e242f;
    --color-text: #e9edf4;
    --color-muted: #98a3b3;
    --color-border: #2a323f;
    --color-border-soft: #222935;
    --color-primary: #7ea0ff;
    --color-primary-contrast: #0f1319;
    --color-primary-soft: #1c2536;

    --correct: #56d09a;
    --correct-soft: #12251d;
    --correct-line: #2c6a4e;

    --missed: #7fb0ff;
    --missed-soft: #14203a;
    --missed-line: #2f5691;

    --worth: #b795f7;
    --worth-soft: #221b39;
    --worth-line: #543b8f;

    --incorrect: #9aa5b5;
    --incorrect-soft: #1c222c;
    --incorrect-line: #3a4453;

    --not-recommended: #f0a44e;
    --not-recommended-soft: #2a1f11;
    --not-recommended-line: #7a5320;

    --unsafe: #f38079;
    --unsafe-soft: #2c1616;
    --unsafe-line: #7d3833;

    --shadow-panel: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 50%);
  }
}