/*
  Altron design tokens (docs/DESIGN.md section 8). The ONE place a colour, a
  font stack or a radius is written down: style.css, share-landing.css and
  legal.css only ever say var(--name). test/tokens.test.js enforces both that
  and the WCAG AA contrast of the documented pairs below.

  Dark is the default. Light follows prefers-color-scheme, and the theme switch
  of the app forces either one: <html class="light"> or <html class="dark">
  (data-theme="light" / "dark" works too). The two light blocks must stay
  identical; the test checks it.

  Text pairs hold 4.5:1: --text and --muted on --bg, --panel and --panel-2;
  --accent and the hues on --bg and --panel; --on-accent on --accent-fill and
  --accent-fill-hover; --good, --warn and --bad on --panel. UI parts (lines,
  focus rings, icons) hold 3:1. Two values differ from DESIGN 8 for that
  reason: the light --good is darker than #248a3d (4.4:1 on white), and the
  filled button has its own hover, --accent-fill-hover, because white on the
  dark --accent-hover is 3.4:1. Put accent text on --bg or --panel, never on
  --accent-soft (use --text there).
*/

:root {
  color-scheme: dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Consolas, Menlo, monospace;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --gap: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --bg: #000000;
  --bg-alt: #0e0e10;
  --canvas: #08080a;
  --glow-1: rgba(255, 69, 58, 0.2);
  --glow-2: rgba(255, 255, 255, 0.05);
  --panel: #1c1c1e;
  --panel-2: #2c2c2e;
  --panel-3: #3a3a3c;
  --scrim: rgba(0, 0, 0, 0.62);
  --nav-bg: rgba(12, 12, 14, 0.72);
  --nav-tint: rgba(255, 69, 58, 0.07);
  --qr-bg: #ffffff;

  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);
  --control-line: rgba(255, 255, 255, 0.4);

  --text: #f5f5f7;
  --muted: #a1a1a6;
  --inverse: #f5f5f7;
  --on-inverse: #000000;

  --accent: #ff453a;
  --accent-fill: #dc2a26;
  --accent-hover: #ff453a;
  --accent-fill-hover: #c4221e;
  --on-accent: #ffffff;
  --accent-soft: rgba(255, 69, 58, 0.14);
  --accent-line: rgba(255, 69, 58, 0.5);

  --good: #30d158;
  --good-soft: rgba(48, 209, 88, 0.14);
  --warn: #ffb340;
  --warn-soft: rgba(255, 159, 10, 0.16);
  --bad: #ff6961;
  --bad-soft: rgba(255, 105, 97, 0.14);

  --hue-red: #ff7d75;
  --hue-orange: #ffa13d;
  --hue-yellow: #ffd60a;
  --hue-green: #30d158;
  --hue-teal: #4fd1c5;
  --hue-blue: #6cb4ff;
  --hue-violet: #c99aff;

  --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.95);
  --shadow-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.9);

  /* derived: the same in both themes, resolved against whichever theme is on */
  --grid-line: color-mix(in srgb, var(--text) 5%, transparent);
  --hue-red-soft: color-mix(in srgb, var(--hue-red) 16%, transparent);
  --hue-orange-soft: color-mix(in srgb, var(--hue-orange) 16%, transparent);
  --hue-yellow-soft: color-mix(in srgb, var(--hue-yellow) 16%, transparent);
  --hue-green-soft: color-mix(in srgb, var(--hue-green) 16%, transparent);
  --hue-teal-soft: color-mix(in srgb, var(--hue-teal) 16%, transparent);
  --hue-blue-soft: color-mix(in srgb, var(--hue-blue) 16%, transparent);
  --hue-violet-soft: color-mix(in srgb, var(--hue-violet) 16%, transparent);
}

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

    --bg: #f5f5f7;
    --bg-alt: #e9e9ee;
    --canvas: #f2f2f7;
    --glow-1: rgba(215, 0, 21, 0.1);
    --glow-2: rgba(255, 255, 255, 0.9);
    --panel: #ffffff;
    --panel-2: #f2f2f7;
    --panel-3: #e5e5ea;
    --scrim: rgba(0, 0, 0, 0.38);
    --nav-bg: rgba(255, 255, 255, 0.74);
    --nav-tint: rgba(215, 0, 21, 0.045);
    --qr-bg: #ffffff;

    --line: rgba(0, 0, 0, 0.12);
    --line-strong: rgba(0, 0, 0, 0.24);
    --control-line: rgba(0, 0, 0, 0.46);

    --text: #1d1d1f;
    --muted: #6e6e73;
    --inverse: #1d1d1f;
    --on-inverse: #ffffff;

    --accent: #d70015;
    --accent-fill: #d70015;
    --accent-hover: #b3000f;
    --accent-fill-hover: #b3000f;
    --on-accent: #ffffff;
    --accent-soft: rgba(215, 0, 21, 0.08);
    --accent-line: rgba(215, 0, 21, 0.4);

    --good: #1b7031;
    --good-soft: rgba(36, 138, 61, 0.12);
    --warn: #a14a00;
    --warn-soft: rgba(178, 80, 0, 0.12);
    --bad: #d70015;
    --bad-soft: rgba(215, 0, 21, 0.08);

    --hue-red: #bf0012;
    --hue-orange: #a14a00;
    --hue-yellow: #7a5c00;
    --hue-green: #1b7031;
    --hue-teal: #006a6b;
    --hue-blue: #0a5ec8;
    --hue-violet: #8a3fb8;

    --shadow: 0 14px 34px -24px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.28);
    --shadow-pop: 0 20px 50px -20px rgba(0, 0, 0, 0.35);
  }
}

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

  --bg: #f5f5f7;
  --bg-alt: #e9e9ee;
  --canvas: #f2f2f7;
  --glow-1: rgba(215, 0, 21, 0.1);
  --glow-2: rgba(255, 255, 255, 0.9);
  --panel: #ffffff;
  --panel-2: #f2f2f7;
  --panel-3: #e5e5ea;
  --scrim: rgba(0, 0, 0, 0.38);
  --nav-bg: rgba(255, 255, 255, 0.74);
  --nav-tint: rgba(215, 0, 21, 0.045);
  --qr-bg: #ffffff;

  --line: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.24);
  --control-line: rgba(0, 0, 0, 0.46);

  --text: #1d1d1f;
  --muted: #6e6e73;
  --inverse: #1d1d1f;
  --on-inverse: #ffffff;

  --accent: #d70015;
  --accent-fill: #d70015;
  --accent-hover: #b3000f;
  --accent-fill-hover: #b3000f;
  --on-accent: #ffffff;
  --accent-soft: rgba(215, 0, 21, 0.08);
  --accent-line: rgba(215, 0, 21, 0.4);

  --good: #1b7031;
  --good-soft: rgba(36, 138, 61, 0.12);
  --warn: #a14a00;
  --warn-soft: rgba(178, 80, 0, 0.12);
  --bad: #d70015;
  --bad-soft: rgba(215, 0, 21, 0.08);

  --hue-red: #bf0012;
  --hue-orange: #a14a00;
  --hue-yellow: #7a5c00;
  --hue-green: #1b7031;
  --hue-teal: #006a6b;
  --hue-blue: #0a5ec8;
  --hue-violet: #8a3fb8;

  --shadow: 0 14px 34px -24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 20px 50px -20px rgba(0, 0, 0, 0.35);
}