/* =====================================================================
   Console · design tokens
   Software as a service. Light is "Light mode"; dark is "Dark mode".
   --go is the one accent (buttons, links, the tour's hotspots, uptime that's fine).
   --warn is only for degraded service and things that need attention; --down only for outages.
   The app window (the tour) keeps its own chrome in both modes.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #fafbfc;
  --card: #ffffff;
  --well: #f0f2f5;
  --line: #dde1e8;
  --ink: #0e1116;
  --ink-2: #363c47;
  --muted: #5a6170;
  --go: #03623f;
  --go-2: #024d31;
  --on-go: #ffffff;
  --go-soft: #dcf3ea;
  --warn: #9a4508;
  --warn-soft: #fdf0e1;
  --down: #b42318;
  --app: #ffffff;
  --app-bar: #eef1f5;
  --focus: #03623f;
  --shadow-card: 0 1px 2px rgba(14, 17, 22, 0.05), 0 16px 34px -24px rgba(14, 17, 22, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(14, 17, 22, 0.5);

  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(40px, 5.4vw, 80px);
  --fs-h2: clamp(30px, 3.4vw, 50px);
  --fs-h3: 21px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0e13;
    --card: #141821;
    --well: #10141b;
    --line: #262c38;
    --ink: #eef1f6;
    --ink-2: #cfd5df;
    --muted: #98a1b2;
    --go: #5ee0ad;
    --go-2: #8aeac4;
    --on-go: #022c1f;
    --go-soft: #11261f;
    --warn: #f6b26b;
    --warn-soft: #2e2112;
    --down: #ff8b80;
    --app: #141821;
    --app-bar: #1b202b;
    --focus: #5ee0ad;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0e13;
  --card: #141821;
  --well: #10141b;
  --line: #262c38;
  --ink: #eef1f6;
  --ink-2: #cfd5df;
  --muted: #98a1b2;
  --go: #5ee0ad;
  --go-2: #8aeac4;
  --on-go: #022c1f;
  --go-soft: #11261f;
  --warn: #f6b26b;
  --warn-soft: #2e2112;
  --down: #ff8b80;
  --app: #141821;
  --app-bar: #1b202b;
  --focus: #5ee0ad;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}