:root {
  color-scheme: light dark;

  /* Ink & surfaces */
  --ink: #0a0d12;
  --paper: #f2f4f6;
  --paper-elevated: #ffffff;
  --paper-muted: #e6eaef;
  --paper-subtle: #f8f9fb;
  --surface-1: var(--paper-elevated);
  --surface-2: var(--paper-muted);
  --surface-inset: color-mix(in srgb, var(--ink) 4%, var(--paper-muted));

  --rule: rgba(10, 13, 18, 0.11);
  --rule-strong: rgba(10, 13, 18, 0.22);
  --ink-90: rgba(10, 13, 18, 0.9);
  --ink-80: rgba(10, 13, 18, 0.78);
  --ink-55: rgba(10, 13, 18, 0.58);
  --ink-35: rgba(10, 13, 18, 0.38);

  /* Brand */
  --signal: #256b62;
  --signal-hover: #1d554e;
  --signal-soft: rgba(37, 107, 98, 0.11);
  --signal-muted: rgba(37, 107, 98, 0.06);
  --on-signal: #f8fbfb;
  --accent: #3dd4bd;
  --accent-soft: rgba(61, 212, 189, 0.14);
  --warn: #9a4a08;
  --warn-soft: rgba(154, 74, 8, 0.1);

  /* Typography — system stacks only */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: 1.375rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-36: 2.25rem;
  --t-40: 2.5rem;
  --t-48: 3rem;
  --t-56: 3.5rem;

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.68;

  --ls-tight: -0.03em;
  --ls-snug: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;

  /* Spacing */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.06), 0 1px 2px rgba(10, 13, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 13, 18, 0.07), 0 2px 4px rgba(10, 13, 18, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 13, 18, 0.09), 0 4px 8px rgba(10, 13, 18, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  /* Layout rhythm */
  --container-max: 1120px;
  --container-narrow: 680px;
  --container-wide: 1240px;
  --nav-h: 60px;
  --section-pad-y: var(--s-6);
  --section-pad-y-lg: var(--s-7);
  --section-gap: var(--s-5);
  --content-gap: var(--s-4);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;

  /* Z-index */
  --z-nav: 50;
  --z-skip: 100;
  --z-overlay: 200;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef0f3;
    --paper: #0a0d12;
    --paper-elevated: #12171f;
    --paper-muted: #1a212c;
    --paper-subtle: #0e1218;
    --surface-inset: color-mix(in srgb, var(--ink) 6%, var(--paper-muted));

    --rule: rgba(238, 240, 243, 0.1);
    --rule-strong: rgba(238, 240, 243, 0.2);
    --ink-90: rgba(238, 240, 243, 0.92);
    --ink-80: rgba(238, 240, 243, 0.8);
    --ink-55: rgba(238, 240, 243, 0.58);
    --ink-35: rgba(238, 240, 243, 0.38);

    --signal: #4dd9c4;
    --signal-hover: #7ae8d6;
    --signal-soft: rgba(77, 217, 196, 0.12);
    --signal-muted: rgba(77, 217, 196, 0.06);
    --on-signal: #0a1210;
    --accent: #2a7a6f;
    --accent-soft: rgba(42, 122, 111, 0.22);
    --warn: #f0a050;
    --warn-soft: rgba(240, 160, 80, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42), 0 4px 8px rgba(0, 0, 0, 0.22);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  }
}

[data-theme="dark"] {
  --ink: #eef0f3;
  --paper: #0a0d12;
  --paper-elevated: #12171f;
  --paper-muted: #1a212c;
  --paper-subtle: #0e1218;
  --surface-inset: color-mix(in srgb, var(--ink) 6%, var(--paper-muted));

  --rule: rgba(238, 240, 243, 0.1);
  --rule-strong: rgba(238, 240, 243, 0.2);
  --ink-90: rgba(238, 240, 243, 0.92);
  --ink-80: rgba(238, 240, 243, 0.8);
  --ink-55: rgba(238, 240, 243, 0.58);
  --ink-35: rgba(238, 240, 243, 0.38);

  --signal: #4dd9c4;
  --signal-hover: #7ae8d6;
  --signal-soft: rgba(77, 217, 196, 0.12);
  --signal-muted: rgba(77, 217, 196, 0.06);
  --on-signal: #0a1210;
  --accent: #2a7a6f;
  --accent-soft: rgba(42, 122, 111, 0.22);
  --warn: #f0a050;
  --warn-soft: rgba(240, 160, 80, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42), 0 4px 8px rgba(0, 0, 0, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] {
  --ink: #0a0d12;
  --paper: #f2f4f6;
  --paper-elevated: #ffffff;
  --paper-muted: #e6eaef;
  --paper-subtle: #f8f9fb;
  --surface-inset: color-mix(in srgb, var(--ink) 4%, var(--paper-muted));

  --rule: rgba(10, 13, 18, 0.11);
  --rule-strong: rgba(10, 13, 18, 0.22);
  --ink-90: rgba(10, 13, 18, 0.9);
  --ink-80: rgba(10, 13, 18, 0.78);
  --ink-55: rgba(10, 13, 18, 0.58);
  --ink-35: rgba(10, 13, 18, 0.38);

  --signal: #256b62;
  --signal-hover: #1d554e;
  --signal-soft: rgba(37, 107, 98, 0.11);
  --signal-muted: rgba(37, 107, 98, 0.06);
  --on-signal: #f8fbfb;
  --accent: #3dd4bd;
  --accent-soft: rgba(61, 212, 189, 0.14);
  --warn: #9a4a08;
  --warn-soft: rgba(154, 74, 8, 0.1);

  --shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.06), 0 1px 2px rgba(10, 13, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 13, 18, 0.07), 0 2px 4px rgba(10, 13, 18, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 13, 18, 0.09), 0 4px 8px rgba(10, 13, 18, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(10, 13, 18, 0.05);
}