/* ============================================================= theme.css - single source of truth for ALL theme variables. Change a colour or font here to retheme the entire site. ============================================================= */ :root { /* ---- font scale (driven by site-wide font-size buttons) ---- */ --text-scale: 1; /* 0.85 .. 1.5 */ /* ---- font stacks ----------------------------------------- */ /* One simple sans stack everywhere; Devanagari text gets Noto. --font-serif is kept as an alias so old markup keeps working. */ --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: var(--font-sans); --font-devanagari: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif; /* ---- brand palette (saffron) ---------------------------- */ --brand: #d97706; --brand-strong: #b45309; --brand-soft: #fef3c7; --brand-on: #ffffff; /* text on top of --brand */ /* ---- surfaces (light mode defaults) --------------------- */ --bg-page: #fdfaf3; /* main page bg */ --bg-surface: #ffffff; /* cards, panels */ --bg-muted: #f8f3e4; /* subtle alt background */ --bg-overlay: rgba(0, 0, 0, 0.06); --border: #f1ead9; --border-strong: #e0d6bb; --divider: #e9e0c8; /* ---- text ---------------------------------------------- */ --text: #1f2937; /* primary */ --text-muted: #6b7280; /* secondary */ --text-subtle: #94a3b8; /* labels */ --text-inverse: #ffffff; /* ---- semantic ------------------------------------------ */ --success: #16a34a; --danger: #dc2626; --warning: #d97706; --info: #0ea5e9; /* ---- shadow -------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.08); /* ---- radius / spacing --------------------------------- */ --radius: 0.5rem; --radius-pill: 999px; color-scheme: light; } /* ============================================================= Dark mode - applied when . ============================================================= */ [data-theme="dark"] { --brand: #f59e0b; --brand-strong: #fbbf24; --brand-soft: #3a2a10; --brand-on: #1c1410; --bg-page: #0f1115; --bg-surface: #181b22; --bg-muted: #1f232c; --bg-overlay: rgba(255, 255, 255, 0.06); --border: #262b35; --border-strong: #343a47; --divider: #2a2f3a; --text: #e5e7eb; --text-muted: #9ca3af; --text-subtle: #6b7280; --text-inverse: #0f1115; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.45); color-scheme: dark; } /* ============================================================= Accent palettes - reader-selectable brand colour. Each accent defines the same four brand tokens twice: once for light and once for dark, so a choice stays legible in both. The two selectors are mutually exclusive (:not([data-theme="dark"]) vs [data-theme="dark"]), so neither depends on source order. No [data-accent] at all = saffron, the defaults set above. ============================================================= */ /* ---- indigo ---- */ :root:not([data-theme="dark"])[data-accent="indigo"] { --brand: #4f46e5; --brand-strong: #4338ca; --brand-soft: #e0e7ff; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="indigo"] { --brand: #818cf8; --brand-strong: #a5b4fc; --brand-soft: #1e1b4b; --brand-on: #0f1020; } /* ---- emerald ---- */ :root:not([data-theme="dark"])[data-accent="emerald"] { --brand: #047857; --brand-strong: #065f46; --brand-soft: #d1fae5; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="emerald"] { --brand: #34d399; --brand-strong: #6ee7b7; --brand-soft: #06281f; --brand-on: #04140f; } /* ---- rose ---- */ :root:not([data-theme="dark"])[data-accent="rose"] { --brand: #be123c; --brand-strong: #9f1239; --brand-soft: #ffe4e6; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="rose"] { --brand: #fb7185; --brand-strong: #fda4af; --brand-soft: #3f1220; --brand-on: #1a0a10; } /* ---- teal ---- */ :root:not([data-theme="dark"])[data-accent="teal"] { --brand: #0f766e; --brand-strong: #115e59; --brand-soft: #ccfbf1; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="teal"] { --brand: #2dd4bf; --brand-strong: #5eead4; --brand-soft: #04292b; --brand-on: #04191a; } /* ---- violet ---- */ :root:not([data-theme="dark"])[data-accent="violet"] { --brand: #7c3aed; --brand-strong: #6d28d9; --brand-soft: #ede9fe; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="violet"] { --brand: #a78bfa; --brand-strong: #c4b5fd; --brand-soft: #2a1b4d; --brand-on: #140d24; } /* ---- saffron (explicit, so the swatch can be re-selected) ---- */ :root:not([data-theme="dark"])[data-accent="saffron"] { --brand: #d97706; --brand-strong: #b45309; --brand-soft: #fef3c7; --brand-on: #ffffff; } :root[data-theme="dark"][data-accent="saffron"] { --brand: #f59e0b; --brand-strong: #fbbf24; --brand-soft: #3a2a10; --brand-on: #1c1410; } /* Swatch buttons in the settings menu. */ .accent-swatches { display: flex; gap: 0.4rem; flex-wrap: wrap; } .accent-swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--border-strong); padding: 0; cursor: pointer; background: var(--swatch); } .accent-swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text); } .accent-swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }