/** * Forkast — semantic color tokens, light + dark. * * theme.json palette slugs reference these custom properties, so every * component styled through presets flips automatically. Dark mode resolves * in this order: * 1. Explicit user choice: / * 2. OS preference: prefers-color-scheme (when no data-theme is set) * * Enqueue for both front end and editor (add_editor_style). */ :root { color-scheme: light; /* Surfaces */ --fk-paper: #FBFAF7; --fk-paper-raised: #FFFFFF; /* Ink */ --fk-ink: #161613; --fk-ink-soft: #3B3A35; --fk-ink-mute: #6E6C64; /* Rules */ --fk-hairline: #E4E2D9; --fk-rule: #161613; /* Signal — the machine layer. Meta, timestamps, kickers, source counts, live indicators. Never headlines, never body copy. */ --fk-signal: #0E7A52; --fk-signal-strong: #0A5C3E; --fk-signal-tint: #EAF4EE; /* Focus */ --fk-focus-ring: 0 0 0 2px var(--fk-paper), 0 0 0 4px var(--fk-signal); /* Imagery */ --fk-img-dim: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fk-paper: #131311; --fk-paper-raised: #1B1B18; --fk-ink: #EDEBE3; --fk-ink-soft: #C8C6BC; --fk-ink-mute: #918F84; --fk-hairline: #2C2C27; --fk-rule: #EDEBE3; --fk-signal: #46C08B; --fk-signal-strong: #6ED2A5; --fk-signal-tint: #14261D; --fk-img-dim: brightness(0.88) contrast(1.02); } } :root[data-theme="dark"] { color-scheme: dark; --fk-paper: #131311; --fk-paper-raised: #1B1B18; --fk-ink: #EDEBE3; --fk-ink-soft: #C8C6BC; --fk-ink-mute: #918F84; --fk-hairline: #2C2C27; --fk-rule: #EDEBE3; --fk-signal: #46C08B; --fk-signal-strong: #6ED2A5; --fk-signal-tint: #14261D; --fk-img-dim: brightness(0.88) contrast(1.02); } /* ------------------------------------------------------------------ */ /* Base disciplines */ /* ------------------------------------------------------------------ */ html { font-optical-sizing: auto; /* Newsreader opsz axis: text sizes get the text cut, headlines get the display cut, from one variable file. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--fk-signal-tint); color: var(--fk-ink); } :focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* The machine layer — one class, used by every meta element. */ .fk-mono { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); font-weight: 500; line-height: var(--wp--custom--fk--leading--mono); letter-spacing: var(--wp--custom--fk--tracking--mono-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; } /* All editorial imagery ships through the house treatment. The duotone preset bakes light-mode paper into the image, so --fk-img-dim tempers figures in dark mode to keep them from glowing. */ .fk-figure img { filter: var(--fk-img-dim); }