/* ── Design tokens ── */
:root {
  --color-bg:          #0f0a1a;
  --color-surface:     #1a1130;
  --color-border:      #4a2e6e;
  --color-text:        #e8daf5;
  --color-text-muted:  #b09ad0;
  --color-muted:       #6b4f8a;
  --color-accent:      #c9a0f0;
  --color-accent-text: #0f0a1a;
  --color-accent-hover:#e2c4ff;
  --color-scroll:      #2e1a4a;
  --color-glow:        rgba(201,160,240,0.18);

  --font-display: 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
  --font-body:    Georgia, 'Times New Roman', serif;

  --radius-sm: 4px;
  --radius-lg: 12px;

  --shadow-card: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,160,240,0.2), 0 0 24px rgba(201,160,240,0.08);
  --transition:  200ms ease;
}

[data-theme="light"] {
  --color-bg:          #f0eaf8;
  --color-surface:     #faf7ff;
  --color-border:      #c4a0e0;
  --color-text:        #1e0f30;
  --color-text-muted:  #5a3a7a;
  --color-muted:       #8a60aa;
  --color-accent:      #7a30c0;
  --color-accent-text: #faf7ff;
  --color-accent-hover:#9040e0;
  --color-scroll:      #d4b8f0;
  --color-glow:        rgba(122,48,192,0.12);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(122,48,192,0.2);
}

/* ── Suppress FOUC for custom elements ── */
:not(:defined) { visibility: hidden; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* ── Utilities ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.flex  { display: flex; }
.grid  { display: grid; }

/* ── Header ── */
.site-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0;
}
.site-subtitle {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0.25rem 0 0;
  font-style: italic;
}

/* ── Theme toggle ── */
.theme-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.3rem 0.6rem;
  transition: color var(--transition), border-color var(--transition);
}
.theme-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Page layout ── */
.page-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: min(480px, 100%);
}