/* ── Non-theme tokens (layout, typography, effects) ─────── */
:root {
  --radius-card:  16px;
  --glass-blur:   blur(20px) saturate(180%);
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-num:     'Roboto Mono', monospace;
}

/* ── Dark theme ──────────────────────────────────────────── */
[data-theme="dark"] {
  /* Hints the browser to render native widget chrome (select dropdown
     popups, scrollbars, form-control internals) in dark. Without this
     the OS paints native <select> option lists white-on-white on Windows. */
  color-scheme: dark;

  /* Legacy vars — keep for existing site.css compatibility */
  --bg-base:      #0d1117;
  --bg-surface:   #161b22;
  --bg-card:      rgba(255, 255, 255, 0.04);
  --gold:         #d4af37;
  --gold-dim:     rgba(212, 175, 55, 0.6);
  --gold-glow:    rgba(212, 175, 55, 0.08);
  --gold-border:  rgba(212, 175, 55, 0.2);
  --text-primary: #f0f0f0;
  --text-muted:   #8b949e;

  /* Semantic tokens — use these in new components */
  --color-bg-page:           #0d1117;
  --color-bg-surface:        #161b22;
  --color-bg-elevated:       rgba(255, 255, 255, 0.04);
  --color-text-primary:      #f0f0f0;
  --color-text-secondary:    #c9d1d9;
  --color-text-muted:        #8b949e;
  --color-border:            rgba(212, 175, 55, 0.2);
  --color-divider:           rgba(255, 255, 255, 0.05);
  --color-interactive-hover: rgba(212, 175, 55, 0.08);
  --color-interactive-focus: rgba(212, 175, 55, 0.2);
  --color-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.4);
  --color-shadow-md:         0 4px 16px rgba(0, 0, 0, 0.5);
  --color-accent:            #d4af37;
  --color-accent-dim:        rgba(212, 175, 55, 0.6);
  --color-accent-glow:       rgba(212, 175, 55, 0.08);
}

/* ── Light theme ─────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* Legacy vars — keep for existing site.css compatibility */
  --bg-base:      #f4f5f7;
  --bg-surface:   #ffffff;
  --bg-card:      rgba(0, 0, 0, 0.03);
  --gold:         #b8860b;
  --gold-dim:     rgba(184, 134, 11, 0.65);
  --gold-glow:    rgba(184, 134, 11, 0.08);
  --gold-border:  rgba(184, 134, 11, 0.25);
  --text-primary: #1a1f2e;
  --text-muted:   #6b7280;

  /* Semantic tokens — use these in new components */
  --color-bg-page:           #f4f5f7;
  --color-bg-surface:        #ffffff;
  --color-bg-elevated:       rgba(0, 0, 0, 0.03);
  --color-text-primary:      #1a1f2e;
  --color-text-secondary:    #374151;
  --color-text-muted:        #6b7280;
  --color-border:            rgba(0, 0, 0, 0.1);
  --color-divider:           rgba(0, 0, 0, 0.06);
  --color-interactive-hover: rgba(184, 134, 11, 0.08);
  --color-interactive-focus: rgba(184, 134, 11, 0.2);
  --color-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08);
  --color-shadow-md:         0 4px 16px rgba(0, 0, 0, 0.1);
  --color-accent:            #b8860b;
  --color-accent-dim:        rgba(184, 134, 11, 0.65);
  --color-accent-glow:       rgba(184, 134, 11, 0.08);
}

/* ── Theme toggle button ─────────────────────────────────── */
.btn-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-theme-toggle:hover {
  background: var(--color-interactive-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

[data-theme="dark"]  .theme-icon--sun  { display: inline; }
[data-theme="dark"]  .theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun  { display: none; }
[data-theme="light"] .theme-icon--moon { display: inline; }