/* ============================================================ Aruo Theme — css/theme.css Include after font/vendor CSS, before page-specific styles. Pair with /js/theme.js (drops data-mode + data-accent on before first paint to prevent flash). ============================================================ */ /* ── Colour tokens ─────────────────────────────────────────── */ :root { --bg: #020617; --surf: rgba(15, 23, 42, 0.72); --bord: rgba(148, 163, 184, 0.12); --text: #e2e8f0; --muted: #64748b; --input: rgba(15, 23, 42, 0.80); /* Accent — space-separated R G B so we can do rgb(var(--ac) / alpha) */ --ac: 59 130 246; /* blue (default) */ } /* ── Light mode ────────────────────────────────────────────── */ html[data-mode="light"] { --bg: #f1f5f9; --surf: rgba(255, 255, 255, 0.88); --bord: rgba(15, 23, 42, 0.09); --text: #0f172a; --muted: #94a3b8; --input: rgba(248, 250, 252, 0.95); } /* ── Accent palettes ───────────────────────────────────────── */ html[data-accent="blue"] { --ac: 59 130 246; } html[data-accent="purple"] { --ac: 139 92 246; } html[data-accent="green"] { --ac: 34 197 94; } html[data-accent="rose"] { --ac: 244 63 94; } html[data-accent="amber"] { --ac: 245 158 11; } html[data-accent="slate"] { --ac: 148 163 184; } /* ── Base ──────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; } .panel { background: var(--surf); border: 1px solid var(--bord); backdrop-filter: blur(12px); } html[data-mode="light"] .panel { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); } /* ── Accent utilities ──────────────────────────────────────── */ /* .ac — accent text */ /* .ac-bg — accent tinted background + border */ /* .ac-badge — pill / tag (bg + border + text) */ /* .ac-left — left border stripe */ /* .ac-btn — ghost button */ /* .ac-link — inline link */ .ac { color: rgb(var(--ac)); } .ac-bg { background: rgba(var(--ac) / .12); border-color: rgba(var(--ac) / .25); } .ac-badge { background: rgba(var(--ac) / .10); border-color: rgba(var(--ac) / .22); color: rgb(var(--ac)); } .ac-left { border-left-color: rgb(var(--ac)) !important; } .ac-link { color: rgb(var(--ac)); } .ac-link:hover { opacity: .75; } .ac-btn { background: rgba(var(--ac) / .12); border-color: rgba(var(--ac) / .25); color: rgb(var(--ac)); transition: background .15s; } .ac-btn:hover { background: rgba(var(--ac) / .24); } /* ── Inputs ────────────────────────────────────────────────── */ .t-input { background: var(--input); color: var(--text); border: 1px solid var(--bord); transition: border-color .15s; } .t-input:focus { border-color: rgb(var(--ac)); outline: none; } .t-input::placeholder { color: var(--muted); opacity: .6; } .t-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--input) inset !important; -webkit-text-fill-color: var(--text) !important; } html[data-mode="light"] .t-input { border-color: rgba(15, 23, 42, 0.14); } /* ── Text helpers ──────────────────────────────────────────── */ .t-muted { color: var(--muted); } .t-head { color: var(--text); } /* ── Theme picker controls ─────────────────────────────────── */ .mode-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.1rem; border-radius: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; cursor: pointer; transition: all .15s; } .mode-btn.active { background: rgba(var(--ac) / .14); border-color: rgba(var(--ac) / .30); color: rgb(var(--ac)); } .mode-btn:not(.active) { border-color: var(--bord); color: var(--muted); } .swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s, box-shadow .15s; } .swatch:hover { transform: scale(1.15); } .swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }