/* ============================================================ nychthemeron.css Toggle themes by setting data-theme on : ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap'); /* ── HADES ───────────────────────────────────────────────── */ [data-theme='hades'] { /* surfaces */ --surface-0: #18160f; --surface-1: #28241a; --surface-2: #2e2a1e; --surface-3: #322e22; --track: #32302a; /* borders */ --border: #4a4538; --border-hi: #5a5040; --border-lo: #38342a; /* primary */ --primary: #d4b278; --primary-fg: #0e0c08; /* semantic */ --warn: #e08840; /* phlegethon */ --warn-subtle: #281808; --warn-border: #4a2c10; --warn-fg: #fff8e8; --danger: #7a1a1a; /* plague */ --danger-subtle: #200808; --danger-border: #3a1010; --danger-fg: #fff8e8; --info: #88aec8; /* cocytus */ --info-subtle: #101e2c; --info-border: #1e3850; --info-fg: #0a1828; --neutral: #7a6e60; /* acheron */ --neutral-fg: #fff8e8; --success: #6aaa7a; /* laurel */ --success-subtle: #0e2214; --success-border: #1e4228; --success-fg: #fff8e8; /* text */ --text-high: #f4f0e8; --text-body: #d0c8b8; --text-muted: #908878; --text-dim: #807868; --text-label: #c0b8a8; /* focus ring */ --focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.65); /* fonts */ --font-serif: 'Cinzel', Georgia, serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ── APOLLO ──────────────────────────────────────────────── */ [data-theme='apollo'] { /* surfaces */ --surface-0: #faf7f2; --surface-1: #f4f0e8; --surface-2: #eee9df; --surface-3: #e4ddd0; --track: #e4ddd0; /* borders */ --border: #bab2a0; --border-hi: #c0b8a8; --border-lo: #ccc4b4; /* primary */ --primary: #b8860b; --primary-fg: #fff8e8; /* semantic */ --warn: #9a6020; /* harmony */ --warn-subtle: #fdf3e0; --warn-border: #e8d0a0; --warn-fg: #fff8e8; --danger: #7a1a1a; /* plague */ --danger-subtle: #faeaea; --danger-border: #c8a0a0; --danger-fg: #fff8e8; --info: #3a5a8a; /* oracle */ --info-subtle: #e8eef8; --info-border: #b0c4e0; --info-fg: #fff8e8; --neutral: #8a8070; /* marble */ --neutral-fg: #fff8e8; --success: #5a7a40; /* laurel */ --success-subtle: #eef4e8; --success-border: #c0d4a8; --success-fg: #fff8e8; /* text */ --text-high: #1a1610; --text-body: #3a3020; --text-muted: #5a5040; --text-dim: #8a8070; --text-label: #5a5040; /* focus ring */ --focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.65); /* fonts */ --font-serif: 'Cinzel', Georgia, serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ── BASE RESET ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } [class^='nych-'], [class^='nych-']::before, [class^='nych-']::after { margin: 0; padding: 0; } html { font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^='nych-']:focus-visible { outline: 2px solid transparent; /* visible in forced-colors / Windows High Contrast */ box-shadow: var(--focus-ring); } body { background-color: var(--surface-0); color: var(--text-body); min-height: 100vh; } @keyframes nych-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .nych-loading-icon .wreath { transform-origin: 340px 180px; animation: nych-spin 2s linear infinite; }