:root {
  --accent: #A51C30; /* Harvard Crimson */
  --accent-2: #A31F34; /* MIT Red-ish blend */
  --bg: #f8fafc;
  --fg: #0f172a;
  --surface: #ffffff;
  --muted: #475569;
}
/* dark mode base via class, but we also allow custom bg modes */
html.dark {
  --bg: #0b1220;
  --fg: #e5e7eb;
  --surface: #0f172a;
  --muted: #94a3b8;
}
/* Background themes (overridable by JS via data-bg attr on html or body) */
html[data-bg="white"] { --bg:#ffffff; --surface:#ffffff; }
html[data-bg="warm"]  { --bg:#fff8f1; --surface:#fffaf5; }
html[data-bg="dim"]   { --bg:#0f172a; --surface:#0b1220; --fg:#e5e7eb; --muted:#a3b0c0; }
html[data-bg="paper"] { --bg:#f8f5f0; --surface:#fbf8f3; }

/* Accent presets */
html[data-accent="harvard"]  { --accent:#A51C30; --accent-2:#7f1423; }
html[data-accent="mit"]      { --accent:#A31F34; --accent-2:#7f1626; }
html[data-accent="stanford"] { --accent:#8C1515; --accent-2:#b53a3a; }
html[data-accent="cobalt"]   { --accent:#2563eb; --accent-2:#1e40af; }

/* Typography */
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }
.font-serif { font-family: 'Crimson Pro', ui-serif, Georgia, serif; }

/* Components */
.navlink { color: inherit; }
.navlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.active { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }

.btn-subtle { padding:.4rem .7rem; border-radius:.6rem; border:1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
.btn-subtle:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
.btn-primary { padding:.6rem 1rem; border-radius:.7rem; background: var(--fg); color: var(--bg); }
.btn-outline { padding:.6rem 1rem; border-radius:.7rem; border:1px solid color-mix(in oklab, var(--fg) 20%, transparent); }
.btn-fab { position:fixed; right:1rem; bottom:1rem; display:none; padding:.6rem .8rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 15%, transparent); background:color-mix(in oklab, var(--surface) 90%, transparent); }
.btn-fab.show { display:inline-flex; }

.card { padding:1.1rem; border-radius:1rem; border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: var(--surface); }
.badge { display:inline-block; font-size:.75rem; padding:.2rem .55rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 15%, transparent); }

/* Motion */
.fade-in { animation: fadeIn .35s ease-out; }
@keyframes fadeIn { from{opacity:.0; transform: translateY(6px);} to{opacity:1; transform:none;} }

/* Command palette items */
#commandPalette .item { display:flex; justify-content:space-between; align-items:center; padding:.6rem .75rem; border-radius:.75rem; cursor:pointer; }
#commandPalette .item:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }

/* Controls in settings panel */
.btn-chip { padding:.45rem .8rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 20%, transparent); }
.chip-bg, .chip-accent { padding:.5rem .7rem; border-radius:.65rem; border:1px solid color-mix(in oklab, var(--fg) 15%, transparent); }

/* Utilities */
.hr-accent { height:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), #22d3ee); }