/* --------------------------------------------------------------------------- * GramyLex theme tokens. * * Three blocks below, in this order: * 1. `:root, :root[data-theme="light"]` -- the light palette. * 2. `:root[data-theme="dark"]` -- the dark palette. * 3. `@media (prefers-color-scheme: dark)` on * `:root:not([data-theme="light"])` -- the SAME dark palette, * so the operating-system preference is the default until the user picks * a theme explicitly. * * CSS has no variable indirection that would let block 3 reference block 2, so * the dark values are written out twice on purpose. THE TWO DARK BLOCKS MUST * STAY IN SYNC -- they are kept adjacent so a change to one is obvious in the * other. Any edit to a dark value has to be made in both places. * * The explicit choice is stored in localStorage under `gramylex-theme` * ('light' | 'dark') and applied to by the pre-paint * script emitted in scripts/build.mjs. * ------------------------------------------------------------------------- */ /* --- LIGHT palette ------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #fbfcfc; --surface: #ffffff; --panel: #f3f6f5; --panelStrong: #e9efed; --sideRail: #e3eae8; --ink: #172326; --textSubtle: #526568; --muted: #687679; --line: #dde5e3; --lineStrong: #bccbc8; --jade: #126e63; --jadeDark: #103f43; /* Darkened from the previous brass, which was 2.62:1 on white and failed WCAG AA. This value is ~5.6:1. */ --brass: #8a6224; --amber: #a46118; --focusRing: #087566; --focusHalo: #ffffff; --statusSuccess: #176b59; --statusWarning: #86540f; --statusDanger: #9b352d; --statusInfo: #315f78; --scrim: rgba(20, 35, 36, .5); --shadowColor: rgba(20, 35, 36, .16); --selectionBg: #c5e5de; --inputBg: #ffffff; --onJade: #ffffff; } /* --- DARK palette (1 of 2: explicit opt-in) ------------------------------ */ /* KEEP IN SYNC with the prefers-color-scheme block immediately below. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1719; --surface: #142023; --panel: #17262a; --panelStrong: #1e3034; --sideRail: #101c1f; --ink: #e8f0ee; --textSubtle: #b6c6c4; --muted: #9aacab; --line: #26383c; --lineStrong: #3a5257; --jade: #4bbfa9; --jadeDark: #17756a; --brass: #d8b56b; --amber: #e0a45c; --focusRing: #4bbfa9; --focusHalo: #0e1719; --statusSuccess: #56c9a8; --statusWarning: #e0a45c; --statusDanger: #f08b80; --statusInfo: #7fb4d4; --scrim: rgba(0, 0, 0, .66); --shadowColor: rgba(0, 0, 0, .55); --selectionBg: #1e4f49; --inputBg: #0e1719; --onJade: #f2fbf8; } /* --- DARK palette (2 of 2: OS preference, no explicit choice yet) --------- */ /* KEEP IN SYNC with :root[data-theme="dark"] immediately above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1719; --surface: #142023; --panel: #17262a; --panelStrong: #1e3034; --sideRail: #101c1f; --ink: #e8f0ee; --textSubtle: #b6c6c4; --muted: #9aacab; --line: #26383c; --lineStrong: #3a5257; --jade: #4bbfa9; --jadeDark: #17756a; --brass: #d8b56b; --amber: #e0a45c; --focusRing: #4bbfa9; --focusHalo: #0e1719; --statusSuccess: #56c9a8; --statusWarning: #e0a45c; --statusDanger: #f08b80; --statusInfo: #7fb4d4; --scrim: rgba(0, 0, 0, .66); --shadowColor: rgba(0, 0, 0, .55); --selectionBg: #1e4f49; --inputBg: #0e1719; --onJade: #f2fbf8; } } /* --- Theme-independent base --------------------------------------------- */ :root { --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: var(--sans); line-height: 1.5; font-weight: 400; color: var(--ink); background: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100svh; background: var(--bg); } button, a, select, textarea, input, summary, [role="button"] { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 2px; box-shadow: 0 0 0 1px var(--focusHalo); } ::selection { background: var(--selectionBg); color: var(--ink); }