/* Design tokens: dark terminal minimalism, blue-violet accent with cyan/magenta for ASCII art. */
:root {
  color-scheme: dark;

  /* Palette */
  --color-bg: #0a0a0a;
  --color-surface: #0f0f0f;
  --color-surface-raised: #141414;
  --color-line: #1d1d1d;
  --color-line-strong: #2c2c2c;
  --color-text: #ededed;
  --color-text-muted: #8c8c8c;
  --color-text-dim: #565656;
  --color-accent: #7a7dff;
  --color-accent-strong: #9a9cff;
  --color-accent-soft: rgb(122 125 255 / 0.14);
  --color-cyan: #5fe3ff;
  --color-magenta: #e07bff;
  --color-glow: rgb(122 125 255 / 0.1);
  --color-header-bg: rgb(10 10 10 / 0.72);
  --color-btn-bg: rgb(255 255 255 / 0.03);

  /* Footer wordmark: resting ink + the three colours of the sweep */
  --wordmark-base: #1c1c34;
  --wordmark-1: var(--color-accent);
  --wordmark-2: var(--color-cyan);
  --wordmark-3: var(--color-magenta);

  /* Typography */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  --text-xl: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --text-2xl: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  --text-hero: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem);

  --tracking-tight: -0.035em;
  --tracking-mono: 0.04em;

  /* Spacing */
  --gutter: clamp(1rem, 0.2rem + 4vw, 5rem);
  --space-section: clamp(5rem, 3.5rem + 6vw, 10rem);
  --container: 90rem;
  --header-h: 4rem;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 800ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Light theme ---------- */

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

  --color-bg: #f4f4f1;
  --color-surface: #ecece8;
  --color-surface-raised: #e5e5e0;
  --color-line: #dcdcd6;
  --color-line-strong: #c4c4bd;
  --color-text: #111113;
  --color-text-muted: #5b5b60;
  --color-text-dim: #94949a;
  --color-accent: #4f52e6;
  --color-accent-strong: #3a3dcc;
  --color-accent-soft: rgb(79 82 230 / 0.12);
  --color-cyan: #0b8fb0;
  --color-magenta: #a33fd1;
  --color-glow: rgb(79 82 230 / 0.09);
  --color-header-bg: rgb(244 244 241 / 0.78);
  --color-btn-bg: rgb(0 0 0 / 0.025);

  --wordmark-base: #dcdce6;
}

/* ---------- Monochrome ASCII (UI accent stays) ---------- */

:root[data-ascii-mode="mono"] {
  --wordmark-base: #1e1e1e;
  --wordmark-1: #6a6a6a;
  --wordmark-2: #e6e6e6;
  --wordmark-3: #6a6a6a;
}

:root[data-theme="light"][data-ascii-mode="mono"] {
  --wordmark-base: #dededa;
  --wordmark-1: #8a8a8a;
  --wordmark-2: #111113;
  --wordmark-3: #8a8a8a;
}