/* Design tokens: afterquery.com format (small serif headings, pill buttons, flat sections) in a cool blue palette after
   kled.ai. Light by default; dark follows the OS unless the visitor picks one with the header toggle (html[data-theme]).
   Canvas art (js/thumbs.js, js/dots.js) reads the --art-* and --map-* tokens, so it switches with the theme. */
:root {
  color-scheme: light;
  --paper: #fafbfd;
  --paper-2: #f1f3f8;
  --paper-3: #e4e8f0;
  --card: #ffffff;
  --ink: #1c2230;
  --ink-2: #444b5c;
  --ink-3: #626b80;
  --on-ink: #ffffff;
  --line: rgba(28, 34, 48, 0.1);
  --line-2: rgba(28, 34, 48, 0.18);
  --tint: rgba(80, 92, 122, 0.09);
  --tint-2: rgba(80, 92, 122, 0.15);
  --brand: #505c7a;
  --brand-hover: #3e4862;
  --hero-top: #e8edf7;
  --hero-bottom: #dfe6f4;
  --accent: #6f8fd0;
  --accent-ink: #34508a;
  --accent-soft: rgba(111, 143, 208, 0.16);
  --positive: #2f6b3a;
  --positive-soft: rgba(47, 107, 58, 0.1);
  --night: #121a2b;
  --night-ink: #eef1f7;
  --backdrop: rgba(18, 26, 43, 0.45);
  --glass: rgba(250, 251, 253, 0.92);
  --art-bg: #e8edf7;
  --art-bg-2: #e4e8f0;
  --art-dot: rgba(79, 110, 175, 0.85);
  --art-dot-2: rgba(80, 92, 122, 0.75);
  --map-land: 28, 34, 48;
  --map-ping: 111, 143, 208;

  --serif: "PT Serif", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: clamp(26px, 2.4vw, 30px);
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 13px;

  --r-btn: 999px;
  --r-card: 12px;
  --r-frame: 12px;
  --container: 1180px;
  --gutter: 40px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow: 0 1px 2px rgba(18, 26, 43, 0.04), 0 24px 48px -28px rgba(18, 26, 43, 0.28);
}

/* Dark: deep navy paper, light ink, the same cool blue lifted for contrast. Kept in one block and applied twice
   (OS preference unless the visitor chose light, and an explicit dark choice). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d121c; --paper-2: #131a26; --paper-3: #1d2533; --card: #141b27;
    --ink: #e8ecf4; --ink-2: #b6bdcc; --ink-3: #8f98ab; --on-ink: #0d121c;
    --line: rgba(232, 236, 244, 0.1); --line-2: rgba(232, 236, 244, 0.2);
    --tint: rgba(138, 164, 216, 0.12); --tint-2: rgba(138, 164, 216, 0.2);
    --brand: #34446a; --brand-hover: #3f5180; --hero-top: #141c2c; --hero-bottom: #182236;
    --accent: #84a3e4; --accent-ink: #a9c0f0; --accent-soft: rgba(132, 163, 228, 0.18);
    --positive: #74c486; --positive-soft: rgba(116, 196, 134, 0.14);
    --night: #080c14; --night-ink: #e8ecf4; --backdrop: rgba(0, 0, 0, 0.6); --glass: rgba(13, 18, 28, 0.88);
    --art-bg: #141c2c; --art-bg-2: #171e2b; --art-dot: rgba(132, 163, 228, 0.8); --art-dot-2: rgba(150, 165, 200, 0.6);
    --map-land: 200, 210, 230; --map-ping: 132, 163, 228;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d121c; --paper-2: #131a26; --paper-3: #1d2533; --card: #141b27;
  --ink: #e8ecf4; --ink-2: #b6bdcc; --ink-3: #8f98ab; --on-ink: #0d121c;
  --line: rgba(232, 236, 244, 0.1); --line-2: rgba(232, 236, 244, 0.2);
  --tint: rgba(138, 164, 216, 0.12); --tint-2: rgba(138, 164, 216, 0.2);
  --brand: #34446a; --brand-hover: #3f5180; --hero-top: #141c2c; --hero-bottom: #182236;
  --accent: #84a3e4; --accent-ink: #a9c0f0; --accent-soft: rgba(132, 163, 228, 0.18);
  --positive: #74c486; --positive-soft: rgba(116, 196, 134, 0.14);
  --night: #080c14; --night-ink: #e8ecf4; --backdrop: rgba(0, 0, 0, 0.6); --glass: rgba(13, 18, 28, 0.88);
  --art-bg: #141c2c; --art-bg-2: #171e2b; --art-dot: rgba(132, 163, 228, 0.8); --art-dot-2: rgba(150, 165, 200, 0.6);
  --map-land: 200, 210, 230; --map-ping: 132, 163, 228;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --fs-lead: 17px; }
}