/* Design tokens — colors, type, and global resets.
   Single source of truth for the wago palette. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0d0f12;
  --bg-panel: #0a0c0f;
  --bg-elev: #101318;

  /* Text */
  --text: #e6e8eb;
  --text-dim: #9aa0a8;
  --text-muted: #8b9099;
  --text-faint: #6b7079;
  --text-ghost: #4d525a;

  /* Brand / accents */
  --purple: #654ff0;
  --purple-300: #8b7bff;
  --purple-200: #a99bff;
  --purple-100: #9d90ff;
  --lilac: #cfa3ff;
  --green: #9ad17e;
  --amber: #e3b341;
  --red: #e0625e;

  /* Hairlines & fills */
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line-faint: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.16);
  --fill-soft: rgba(255, 255, 255, 0.04);
  --fill-chip: rgba(255, 255, 255, 0.06);

  /* Status pill backgrounds */
  --pill-done-bg: rgba(154, 209, 126, 0.13);
  --pill-partial-bg: rgba(227, 179, 65, 0.13);
  --pill-planned-bg: rgba(255, 255, 255, 0.05);
  --pill-none-bg: rgba(224, 98, 94, 0.11);

  /* Chrome, terminal & effects (themeable) */
  --nav-bg: rgba(13, 15, 18, 0.72);
  --line-btn: rgba(255, 255, 255, 0.14);
  --line-dash: rgba(255, 255, 255, 0.14);
  --term-dot: #3a3f47;
  --term-shadow: rgba(0, 0, 0, 0.8);
  --text-code: #cfd3d8;
  --glow: rgba(101, 79, 240, 0.14);
  --logo-glow: rgba(101, 79, 240, 0.55);

  /* Type */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  /* Font for the ASCII-art logo. Deliberately excludes the JetBrains Mono
     webfont: it lacks the box-drawing glyphs (U+2500+), so those fall back to a
     different font while spaces stay JBM — mismatched advance widths shift any
     row with a different space/box ratio. A single self-consistent monospace
     (spaces + box glyphs from one font) keeps the columns aligned. */
  --mono-art: ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", Menlo,
    Consolas, monospace;

  /* Layout */
  --maxw: 1000px;
  --nav-h: 60px;
}

/* ---- Light theme ----
   Set by an early inline script (data-theme="light") from the saved choice or
   the system preference. Surfaces lighten, text darkens, neutral white-overlay
   hairlines flip to black, and the accent colors deepen for contrast on white. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f8fa;
  --bg-panel: #ffffff;
  --bg-elev: #eef0f3;

  --text: #1a1d21;
  --text-dim: #565c66;
  --text-muted: #6b7079;
  --text-faint: #8a9099;
  --text-ghost: #aab0b8;

  --purple: #5b46e0;
  --purple-300: #5b46e0;
  --purple-200: #6647e6;
  --purple-100: #4a37c4;
  --lilac: #7c3aed;
  --green: #3f9142;
  --amber: #a9791b;
  --red: #cc4b47;

  --line: rgba(0, 0, 0, 0.1);
  --line-soft: rgba(0, 0, 0, 0.08);
  --line-faint: rgba(0, 0, 0, 0.06);
  --line-strong: rgba(0, 0, 0, 0.16);
  --fill-soft: rgba(0, 0, 0, 0.04);
  --fill-chip: rgba(0, 0, 0, 0.06);

  --pill-done-bg: rgba(63, 145, 66, 0.12);
  --pill-partial-bg: rgba(169, 121, 27, 0.14);
  --pill-planned-bg: rgba(0, 0, 0, 0.05);
  --pill-none-bg: rgba(204, 75, 71, 0.1);

  --nav-bg: rgba(255, 255, 255, 0.74);
  --line-btn: rgba(0, 0, 0, 0.14);
  --line-dash: rgba(0, 0, 0, 0.2);
  --term-dot: #cdd2d8;
  --term-shadow: rgba(30, 35, 60, 0.14);
  --text-code: #2a2e35;
  --glow: rgba(101, 79, 240, 0.1);
  --logo-glow: rgba(101, 79, 240, 0.28);
}

/* Cross-fade the major surfaces when the theme flips. */
body,
.nav,
.footer,
.panel,
.terminal,
.codecard,
.feature-list,
.pipeline,
.conformance {
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(101, 79, 240, 0.35);
}

a {
  color: inherit;
}

code {
  font-family: var(--mono);
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}