@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --brand-purple: #7C3AED;
    --brand-purple-light: #B794F6;
    --brand-purple-dark: #5B21B6;
    --brand-green: #4ADE80;
    --font-heading: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

:root[data-theme="dark"] {
    --bg-primary: #020617;
    --bg-secondary: #0F172A;
    --bg-card: #1E293B;
    --bg-card-hover: #334155;
    --border-color: #334155;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
}

:root[data-theme="light"] {
    --bg-primary: #E8EBF0;
    --bg-secondary: #F1F3F7;
    --bg-card: #F5F6F9;
    --bg-card-hover: #ECEEF2;
    --border-color: #D1D5DB;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Tailwind hardcoded colors */
.bg-\[\#0a0a0a\] { background-color: var(--bg-primary) !important; }
.bg-\[\#1e1e1e\] { background-color: var(--bg-card) !important; }
.text-\[\#e8e8e8\] { color: var(--text-primary) !important; }
.border-slate-700 { border-color: var(--border-color) !important; }

/* Cards & sections */
main a.block { background-color: var(--bg-card) !important; }
main a.block:hover { background-color: var(--bg-card-hover) !important; }

/* Header */
header { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); letter-spacing: -0.02em; }
code,pre,.mono { font-family: var(--font-mono); }

.wordmark { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.03em; }
.wordmark-accent { color: var(--brand-purple); }

#themeToggle { background: none; border: 1px solid var(--border-color); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--text-primary); }
#themeToggle:hover { background: var(--bg-card-hover); }