/* Brand guide 2, section 2: the single source of colour. Type and space scales follow. */
:root {
  color-scheme: light dark;
  --win: #FFFFFF; --side: #F5F5F7; --hover: #EBEBED; --fill: #E1E1E5;
  --text: #1D1D1F; --text2: #636368; --text3: #8E8E93;
  --line: rgba(0,0,0,0.10); --control-line: rgba(0,0,0,0.44);
  --accent: #0866F0; --on-accent: #FFFFFF;
  --tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --marker-ring: #FFFFFF;
  --good: #2A9254; --caution: #A67800; --problem: #C4453C;
  --shadow: 0 10px 36px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --win: #1E1E1E; --side: #272729; --hover: #323234; --fill: #3A3A3D;
    --text: #F5F5F7; --text2: #A1A1A6; --text3: #7C7C80;
    --line: rgba(255,255,255,0.10); --control-line: rgba(255,255,255,0.36);
    --accent: #4590FF; --on-accent: #0B0B0C;
    --good: #46B877; --caution: #D4A72C; --problem: #E0685E;
    --shadow: 0 10px 36px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --win: #1E1E1E; --side: #272729; --hover: #323234; --fill: #3A3A3D;
  --text: #F5F5F7; --text2: #A1A1A6; --text3: #7C7C80;
  --line: rgba(255,255,255,0.10); --control-line: rgba(255,255,255,0.36);
  --accent: #4590FF; --on-accent: #0B0B0C;
  --good: #46B877; --caution: #D4A72C; --problem: #E0685E;
  --shadow: 0 10px 36px rgba(0,0,0,.5);
}

:root {
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI Variable Text", "Segoe UI", Cantarell, Ubuntu, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 24px; --section: 96px; --r: 6px; --wr: 10px; --wide: 1120px; --measure: 680px;
  --h1: 52px; --h1-l: 58px; --h2: 32px; --h2-l: 40px; --lead: 19px; --lead-l: 30px;
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --section: 64px; --h1: 34px; --h1-l: 40px; --h2: 26px; --h2-l: 32px; --lead: 17px; --lead-l: 27px; }
}