:root {
  color-scheme: light;

  /* Spacing tokens */
  --inline-space: 1rem;
  --inline-space-half: calc(var(--inline-space) / 2);
  --block-space: 1rem;

  /* Typography */
  --font-sans: "Inter", "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Roboto", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Slate + Emerald Palette (light mode baseline) */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-ink: #0f172a;
  --color-muted: #475569;
  --color-primary: #059669;
  --color-primary-strong: #047857;
  --color-accent: #0d9488;
  --color-violet: #7c3aed;
  --color-border: #cbd5e1;
  --color-flash-notice-border: #059669;
  --color-flash-notice-bg: #ecfdf5;
  --color-flash-alert-border: #dc2626;
  --color-flash-alert-bg: #fef2f2;
  --color-status-bg: #ecfdf5;
  --color-status-border: #059669;
  --color-status-ink: #065f46;
  --color-bg-radial-start: #ecfdf5;
  --color-bg-radial-end: #f8fafc;
  --color-bg-linear-start: #f8fafc;
  --color-bg-linear-end: #f1f5f9;
  --color-terminal-bg-start: #0f1a14;
  --color-terminal-bg-end: #0a1410;
  --color-terminal-border: #1a3a2a;
  --color-terminal-ink: #e2e8f0;
  --color-terminal-title: #6ee7b7;
  --color-terminal-prompt: #34d399;
  --color-terminal-system: #fbbf24;
  --color-terminal-success: #5eead4;

  --shadow-lg: 0 14px 36px rgb(15 23 42 / 10%);
  --shadow-terminal: 0 10px 40px rgb(5 150 105 / 14%), 0 0 0 1px var(--color-terminal-border);
  --radius-lg: 8px;
  --container-max: 1120px;

  /* Backward compatibility aliases */
  --sw-bg: var(--color-bg);
  --sw-surface: var(--color-surface);
  --sw-surface-alt: var(--color-surface-alt);
  --sw-text: var(--color-ink);
  --sw-muted: var(--color-muted);
  --sw-primary: var(--color-primary);
  --sw-primary-dark: var(--color-primary-strong);
  --sw-accent: var(--color-accent);
  --sw-border: var(--color-border);
  --sw-shadow: var(--shadow-lg);
  --sw-radius: var(--radius-lg);
  --sw-container: var(--container-max);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a0f0d;
  --color-surface: #0f1714;
  --color-surface-alt: #162420;
  --color-ink: #f1f5f9;
  --color-muted: #94a3b8;
  --color-primary: #34d399;
  --color-primary-strong: #6ee7b7;
  --color-accent: #5eead4;
  --color-violet: #a78bfa;
  --color-border: #1e3a2e;
  --color-flash-notice-border: #2f7a66;
  --color-flash-notice-bg: #102622;
  --color-flash-alert-border: #7b3555;
  --color-flash-alert-bg: #301524;
  --color-status-bg: #0f2318;
  --color-status-border: #2a9070;
  --color-status-ink: #6ee7b7;
  --color-bg-radial-start: #0a0f0d;
  --color-bg-radial-end: #0a0f0d;
  --color-bg-linear-start: #0a0f0d;
  --color-bg-linear-end: #080c0a;
  --color-terminal-bg-start: #0a1410;
  --color-terminal-bg-end: #070f0b;
  --color-terminal-border: #1a3a2a;
  --color-terminal-ink: #f1f5f9;
  --color-terminal-title: #6ee7b7;
  --color-terminal-prompt: #34d399;
  --color-terminal-system: #fbbf24;
  --color-terminal-success: #5eead4;
  --shadow-lg: 0 0 0 1px rgb(30 58 42 / 45%), 0 20px 34px rgb(0 0 0 / 42%);
  --shadow-terminal: 0 0 0 1px rgb(26 58 42 / 72%), 0 22px 38px rgb(0 0 0 / 58%);
}

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

    --color-bg: #0a0f0d;
    --color-surface: #0f1714;
    --color-surface-alt: #162420;
    --color-ink: #f1f5f9;
    --color-muted: #94a3b8;
    --color-primary: #34d399;
    --color-primary-strong: #6ee7b7;
    --color-accent: #5eead4;
    --color-violet: #a78bfa;
    --color-border: #1e3a2e;
    --color-flash-notice-border: #2f7a66;
    --color-flash-notice-bg: #102622;
    --color-flash-alert-border: #7b3555;
    --color-flash-alert-bg: #301524;
    --color-status-bg: #0f2318;
    --color-status-border: #2a9070;
    --color-status-ink: #6ee7b7;
    --color-bg-radial-start: #0a0f0d;
    --color-bg-radial-end: #0a0f0d;
    --color-bg-linear-start: #0a0f0d;
    --color-bg-linear-end: #080c0a;
    --color-terminal-bg-start: #0a1410;
    --color-terminal-bg-end: #070f0b;
    --color-terminal-border: #1a3a2a;
    --color-terminal-ink: #f1f5f9;
    --color-terminal-title: #6ee7b7;
    --color-terminal-prompt: #34d399;
    --color-terminal-system: #fbbf24;
    --color-terminal-success: #5eead4;
    --shadow-lg: 0 0 0 1px rgb(30 58 42 / 45%), 0 20px 34px rgb(0 0 0 / 42%);
    --shadow-terminal: 0 0 0 1px rgb(26 58 42 / 72%), 0 22px 38px rgb(0 0 0 / 58%);
  }
}

* {
  box-sizing: border-box;
}

:where(body, h1, h2, h3, p, ul) {
  margin: 0;
}

body {
  min-block-size: 100vh;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--color-bg-radial-start) 78%, var(--color-violet) 22%) 0%, transparent 42%),
    radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--color-bg-radial-start) 78%, var(--color-primary) 22%) 0%, transparent 36%),
    linear-gradient(165deg, var(--color-bg-linear-start) 0%, var(--color-bg-linear-end) 100%);
  line-height: 1.55;
}

:where(h1, h2, h3) {
  margin-block-end: 0.55rem;
  font-family: var(--font-serif);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

p {
  margin-block-end: 0.85rem;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  padding-inline-start: 1.1rem;
}

:where(button, input, textarea, select, .sw-button, .sw-link, .sw-text-link) {
  font: inherit;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, filter 150ms ease;
}

:where(a, button, input, textarea, select, .sw-button, .sw-link, .sw-text-link):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 74%, #fff 26%);
  outline-offset: 2px;
}

.for-screen-reader {
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}