/* ════════════════════════════════════════════════════════════
   base.css — Shared design tokens and reset for all pages
   ════════════════════════════════════════════════════════════ */

:root {
  /* Colors — Light mode */
  --color-bg: #F5F4F1;
  --color-bg-warm: #FFFFFF;
  --color-bg-alt: #ECEAE5;
  --color-bg-subtle: #F9F8F6;
  --color-text: #1A1917;
  --color-text-secondary: #4A4843;
  --color-text-tertiary: #7A776F;
  --color-accent: #2B5470;
  --color-accent-hover: #1D3F55;
  --color-accent-muted: rgba(43,84,112,0.07);
  --color-border: #E2E0DA;
  --color-border-strong: #C8C4BC;
  --color-error: #b74242;
  --color-error-muted: rgba(183,66,66,0.09);
  --color-green: #2a7d52;
  --color-green-muted: rgba(42,125,82,0.10);
  --color-adjacent: #b08c10;
  --color-adjacent-muted: rgba(176,140,16,0.10);

  /* Typography */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* Spacing & layout */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --duration-fast: 0.18s;

  /* Theme toggle icon visibility */
  --icon-sun-display: none;
  --icon-moon-display: block;
}

/* ── Dark palette values (always available for reference) ── */
:root {
  --color-bg-dark: #0F1215;
  --color-bg-warm-dark: #181C25;
  --color-bg-alt-dark: #1C2028;
  --color-bg-subtle-dark: #141820;
  --color-text-dark: #E4E6EB;
  --color-text-secondary-dark: #9AA0AC;
  --color-text-tertiary-dark: #7A8090;
  --color-accent-dark: #5A9BD4;
  --color-accent-hover-dark: #7BB5E8;
  --color-accent-muted-dark: rgba(90,155,212,0.10);
  --color-border-dark: #282C36;
  --color-border-strong-dark: #3A4050;
  --color-error-dark: #ef8686;
  --color-error-muted-dark: rgba(239,134,134,0.12);
  --color-green-dark: #34d399;
  --color-green-muted-dark: rgba(52,211,153,0.10);
  --color-adjacent-dark: #d4a017;
  --color-adjacent-muted-dark: rgba(212,160,23,0.10);
}

/* ════════════════════════════════════════════════════════════
   Dark Mode
   Both blocks must stay in sync: @media handles first-paint
   before JS runs; [data-theme] handles explicit user toggle.
   ════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-bg-dark);
    --color-bg-warm: var(--color-bg-warm-dark);
    --color-bg-alt: var(--color-bg-alt-dark);
    --color-bg-subtle: var(--color-bg-subtle-dark);
    --color-text: var(--color-text-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-tertiary: var(--color-text-tertiary-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-hover: var(--color-accent-hover-dark);
    --color-accent-muted: var(--color-accent-muted-dark);
    --color-border: var(--color-border-dark);
    --color-border-strong: var(--color-border-strong-dark);
    --color-error: var(--color-error-dark);
    --color-error-muted: var(--color-error-muted-dark);
    --color-green: var(--color-green-dark);
    --color-green-muted: var(--color-green-muted-dark);
    --color-adjacent: var(--color-adjacent-dark);
    --color-adjacent-muted: var(--color-adjacent-muted-dark);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
    --icon-sun-display: block;
    --icon-moon-display: none;
  }
  :root:not([data-theme="light"]) a:focus-visible,
  :root:not([data-theme="light"]) button:focus-visible,
  :root:not([data-theme="light"]) [tabindex]:focus-visible {
    outline-color: var(--color-accent);
  }
}

[data-theme="dark"] {
  --color-bg: var(--color-bg-dark);
  --color-bg-warm: var(--color-bg-warm-dark);
  --color-bg-alt: var(--color-bg-alt-dark);
  --color-bg-subtle: var(--color-bg-subtle-dark);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
  --color-text-tertiary: var(--color-text-tertiary-dark);
  --color-accent: var(--color-accent-dark);
  --color-accent-hover: var(--color-accent-hover-dark);
  --color-accent-muted: var(--color-accent-muted-dark);
  --color-border: var(--color-border-dark);
  --color-border-strong: var(--color-border-strong-dark);
  --color-error: var(--color-error-dark);
  --color-error-muted: var(--color-error-muted-dark);
  --color-green: var(--color-green-dark);
  --color-green-muted: var(--color-green-muted-dark);
  --color-adjacent: var(--color-adjacent-dark);
  --color-adjacent-muted: var(--color-adjacent-muted-dark);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
  --icon-sun-display: block;
  --icon-moon-display: none;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible {
  outline-color: var(--color-accent);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }