/* Theme presets — switched by [data-theme] attribute on */ /* ─── COLOR THEMES ─── */ /* Warm Paper (default) — re-tuned to StudyFetch-style cool light gray */ :root, [data-theme="warm-paper"] { --paper: oklch(0.985 0.003 250); --paper-2: oklch(0.965 0.004 250); --paper-3: oklch(0.940 0.005 250); --oat: oklch(0.88 0.01 250); --line: oklch(0.85 0.008 250); --line-soft: oklch(0.92 0.005 250); --ink: oklch(0.12 0.005 250); --ink-2: oklch(0.24 0.006 250); --ink-3: oklch(0.42 0.008 250); --ink-4: oklch(0.58 0.008 250); --bg-page: oklch(0.965 0.004 250); --terracotta: oklch(0.55 0.16 40); --terracotta-soft: oklch(0.90 0.06 45); --sage: oklch(0.46 0.13 150); --sage-soft: oklch(0.90 0.05 145); --indigo: oklch(0.42 0.14 270); --indigo-soft: oklch(0.90 0.04 270); --amber: oklch(0.68 0.16 75); --amber-soft: oklch(0.93 0.06 80); --rose: oklch(0.55 0.18 25); } /* Clinical — cool, crisp, hospital-modern */ [data-theme="clinical"] { --paper: oklch(0.99 0.005 230); --paper-2: oklch(0.97 0.008 230); --paper-3: oklch(0.95 0.012 230); --oat: oklch(0.90 0.015 225); --line: oklch(0.87 0.015 225); --line-soft: oklch(0.93 0.010 225); --ink: oklch(0.18 0.020 240); --ink-2: oklch(0.32 0.020 240); --ink-3: oklch(0.50 0.020 235); --ink-4: oklch(0.66 0.015 230); --terracotta: oklch(0.55 0.16 245); --terracotta-soft: oklch(0.94 0.04 245); --sage: oklch(0.62 0.12 175); --sage-soft: oklch(0.94 0.04 175); --indigo: oklch(0.50 0.16 280); --indigo-soft: oklch(0.94 0.03 280); --amber: oklch(0.78 0.13 80); --amber-soft: oklch(0.95 0.04 85); --rose: oklch(0.62 0.18 18); --bg-page: oklch(0.96 0.012 230); } /* Midnight — dark mode */ [data-theme="midnight"] { --paper: oklch(0.20 0.012 260); --paper-2: oklch(0.24 0.012 260); --paper-3: oklch(0.28 0.014 260); --oat: oklch(0.34 0.015 260); --line: oklch(0.36 0.015 260); --line-soft: oklch(0.30 0.012 260); --ink: oklch(0.96 0.005 260); --ink-2: oklch(0.86 0.008 260); --ink-3: oklch(0.70 0.012 260); --ink-4: oklch(0.55 0.012 260); --terracotta: oklch(0.74 0.14 40); --terracotta-soft: oklch(0.32 0.06 40); --sage: oklch(0.74 0.12 155); --sage-soft: oklch(0.30 0.04 155); --indigo: oklch(0.72 0.14 270); --indigo-soft: oklch(0.32 0.05 270); --amber: oklch(0.84 0.14 85); --amber-soft: oklch(0.34 0.05 85); --rose: oklch(0.74 0.14 20); --bg-page: oklch(0.16 0.012 260); } /* Botanical — green-forward, earthy */ [data-theme="botanical"] { --paper: oklch(0.97 0.014 130); --paper-2: oklch(0.95 0.018 130); --paper-3: oklch(0.93 0.020 130); --oat: oklch(0.88 0.025 130); --line: oklch(0.85 0.022 130); --line-soft: oklch(0.91 0.018 130); --ink: oklch(0.22 0.020 145); --ink-2: oklch(0.34 0.020 145); --ink-3: oklch(0.50 0.018 140); --ink-4: oklch(0.66 0.015 135); --terracotta: oklch(0.55 0.13 145); --terracotta-soft: oklch(0.93 0.04 140); --sage: oklch(0.60 0.10 90); --sage-soft: oklch(0.94 0.04 90); --indigo: oklch(0.48 0.12 230); --indigo-soft: oklch(0.93 0.03 230); --amber: oklch(0.76 0.14 70); --amber-soft: oklch(0.94 0.04 75); --rose: oklch(0.62 0.14 25); --bg-page: oklch(0.94 0.018 130); } /* Sunset — warm pinks/oranges */ [data-theme="sunset"] { --paper: oklch(0.97 0.018 35); --paper-2: oklch(0.95 0.024 35); --paper-3: oklch(0.93 0.028 35); --oat: oklch(0.88 0.035 35); --line: oklch(0.85 0.030 35); --line-soft: oklch(0.91 0.025 35); --ink: oklch(0.22 0.020 30); --ink-2: oklch(0.34 0.022 30); --ink-3: oklch(0.50 0.020 30); --ink-4: oklch(0.66 0.018 30); --terracotta: oklch(0.62 0.18 25); --terracotta-soft: oklch(0.92 0.06 30); --sage: oklch(0.60 0.10 165); --sage-soft: oklch(0.94 0.04 165); --indigo: oklch(0.52 0.14 320); --indigo-soft: oklch(0.93 0.04 320); --amber: oklch(0.78 0.16 70); --amber-soft: oklch(0.95 0.05 70); --rose: oklch(0.66 0.18 10); --bg-page: oklch(0.93 0.030 35); } /* ─── TYPOGRAPHY PAIRS ─── */ /* Editorial (default) — Source Serif + Inter Tight */ :root, [data-type="editorial"] { --serif: 'Source Serif 4', ui-serif, Georgia, serif; --sans: 'Inter Tight', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* Modern — Fraunces display + Inter body */ [data-type="modern"] { --serif: 'Fraunces', ui-serif, Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* Humanist — Lora + Work Sans */ [data-type="humanist"] { --serif: 'Lora', ui-serif, Georgia, serif; --sans: 'Work Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Geometric — Space Grotesk everywhere */ [data-type="geometric"] { --serif: 'Space Grotesk', system-ui, sans-serif; --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; } /* Classical — Playfair + Source Sans */ [data-type="classical"] { --serif: 'Playfair Display', ui-serif, Georgia, serif; --sans: 'Source Sans 3', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* ─── DENSITY ─── */ [data-density="compact"] { --density-pad: 0.85; } [data-density="cozy"] { --density-pad: 1; } [data-density="spacious"] { --density-pad: 1.15; } /* page background follows theme */ body { background: var(--bg-page) !important; }