:root {
  color-scheme: light dark;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Color: dark */
  --bg: #070a10;
  --bg-2: #0a1020;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  /* Higher contrast defaults (readability first). */
  --text: rgba(248, 250, 255, 0.97);
  --muted: rgba(248, 250, 255, 0.78);
  --faint: rgba(248, 250, 255, 0.6);
  --ink-solid: #f8faff;

  /* Accent */
  --accent: #84f3ff;
  --accent-2: #7a8cff;
  --accent-3: #d4b5ff;
  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 68%, #ffffff);

  /* Layout */
  --container-max: 1240px;
  --container-pad: 1.25rem;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  /* Shadows */
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.42);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Type */
  --text-xs: 0.85rem;
  --text-sm: 0.95rem;
  --text-md: 1rem;
  --text-lg: 1.1rem;
  --text-xl: clamp(1.25rem, 1.2vw + 1.05rem, 1.55rem);
  --text-2xl: clamp(1.55rem, 1.9vw + 1.15rem, 2.05rem);
  --text-3xl: clamp(2.15rem, 3.7vw + 1.35rem, 3.55rem);
  --text-4xl: clamp(2.55rem, 5vw + 1.45rem, 4.5rem);

  --line: 72ch;

  /*
    Adaptive surfaces:
    Use the current text ("ink") and background ("paper") to derive panel fills that keep contrast
    without relying on translucent "glass" layers. This responds automatically to light/dark mode.
  */
  --paper: var(--bg);
  --panel-1: color-mix(in srgb, var(--paper) 94%, var(--ink-solid) 6%);
  --panel-2: color-mix(in srgb, var(--paper) 90%, var(--ink-solid) 10%);
  --panel-3: color-mix(in srgb, var(--paper) 86%, var(--ink-solid) 14%);
  --panel-border: color-mix(in srgb, var(--paper) 75%, var(--ink-solid) 25%);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbfe;
    --bg-2: #eef2ff;
    --surface: rgba(0, 0, 0, 0.04);
    --surface-2: rgba(0, 0, 0, 0.07);
    --border: rgba(0, 0, 0, 0.12);
    /* Higher contrast defaults (readability first). */
    --text: rgba(6, 9, 18, 0.96);
    --muted: rgba(6, 9, 18, 0.74);
    --faint: rgba(6, 9, 18, 0.54);
    --ink-solid: #060912;

    --accent: #0b5fff;
    --accent-2: #4a55ff;
    --accent-3: #8f3dff;
    --link: var(--accent);
    --link-hover: color-mix(in srgb, var(--accent) 70%, #000000);

    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.18);
  }
}

/* Explicit theme overrides (set by /assets/js/theme.js). */
:root[data-theme="dark"] {
  --bg: #070a10;
  --bg-2: #0a1020;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(248, 250, 255, 0.97);
  --muted: rgba(248, 250, 255, 0.78);
  --faint: rgba(248, 250, 255, 0.6);
  --ink-solid: #f8faff;
  --accent: #84f3ff;
  --accent-2: #7a8cff;
  --accent-3: #d4b5ff;
  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 68%, #ffffff);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.42);
  --paper: var(--bg);
  --panel-1: color-mix(in srgb, var(--paper) 94%, var(--ink-solid) 6%);
  --panel-2: color-mix(in srgb, var(--paper) 90%, var(--ink-solid) 10%);
  --panel-3: color-mix(in srgb, var(--paper) 86%, var(--ink-solid) 14%);
  --panel-border: color-mix(in srgb, var(--paper) 75%, var(--ink-solid) 25%);
}

:root[data-theme="light"] {
  --bg: #fbfbfe;
  --bg-2: #eef2ff;
  --surface: rgba(0, 0, 0, 0.04);
  --surface-2: rgba(0, 0, 0, 0.07);
  --border: rgba(0, 0, 0, 0.12);
  --text: rgba(6, 9, 18, 0.96);
  --muted: rgba(6, 9, 18, 0.74);
  --faint: rgba(6, 9, 18, 0.54);
  --ink-solid: #060912;
  --accent: #0b5fff;
  --accent-2: #4a55ff;
  --accent-3: #8f3dff;
  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 70%, #000000);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.09);
  --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.18);
  --paper: var(--bg);
  --panel-1: color-mix(in srgb, var(--paper) 94%, var(--ink-solid) 6%);
  --panel-2: color-mix(in srgb, var(--paper) 90%, var(--ink-solid) 10%);
  --panel-3: color-mix(in srgb, var(--paper) 86%, var(--ink-solid) 14%);
  --panel-border: color-mix(in srgb, var(--paper) 75%, var(--ink-solid) 25%);
}