/* ========================================================================= Design_Token definition file (Requirement 3.1) This is the ONE file in the repository permitted to contain a literal color, font size, or spacing value. `tools/verify/literals.py` exempts this path and this path only; every other stylesheet and every Component_Template reaches these values through `var(--tkc-...)`. Naming: --tkc--[-] Categories: color, space, font, size, weight, leading, radius, shadow, motion Caps (Requirements 3.2, 3.3, 3.4, 3.12), all at the cap, none over it: 2 font families 7 font sizes 3 font weights 3 line heights 8 spacing steps 8 colors per appearance 3 radii 3 shadows 3 motion durations (120ms to 400ms) Appearance sets (Requirement 3.5) are emitted as three blocks, in this order: 1. `:root` light values 2. `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])` 3. `:root[data-theme="dark"]` explicit dark Block 2 gives the system-preference default (Requirement 3.7) and its `:not([data-theme="light"])` guard is what lets an explicit light selection beat a system dark preference (Requirement 3.11). Block 3 comes last so an explicit dark selection wins under a system light preference. Component templates never name an appearance; they name one token. Derived variants -- an accent at reduced opacity, a shadow tint -- are expressed with `color-mix()` or `rgb(from ...)` over a named token, never as a fresh literal, and are excluded from the 8-color cap by Requirement 3.4. The palette is the one the site already renders, carried over from `static/css/custom.css` so the refresh reads as the same site: deep teal ink, terracotta accent, cream page, warm peach in dark appearance. Two values were moved to clear the 4.5:1 contrast floor of Requirement 8.1 against the cream page: the terracotta accent #b5623a -> #a85530 (4.02:1 -> 4.71:1) and its strong variant #9d4f2c -> #8f4426 (6.25:1). Task 8.4 checks every declared pair mechanically in both appearances. ========================================================================= */ /* ------------------------------------------------------------------------- 1. `:root` -- light appearance, and every appearance-independent token ------------------------------------------------------------------------- */ :root { /* Font families (2, Requirement 3.2). Both are already requested by the existing Google Fonts link, so the token layer adds no font download. */ --tkc-font-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --tkc-font-display: Merriweather, Georgia, "Times New Roman", serif; /* Root size. The vendored theme's screen.css sets `html { font-size: 62.5% }`, so on this site 1rem is 10px, not 16px. Resetting the root would enlarge every theme rule by 60%, so every rem value in this file is written at 1.6 times its 16px-root size instead: 1.6rem = 16px. Values stay in rem so a visitor's browser font-size preference still scales the whole layer. Font sizes (7, Requirement 3.2). `--tkc-size-100` is the prose floor at 1.6rem = 16px: nothing rendering prose may go below it, which retires the 0.92rem / 0.95rem meta text scattered through the legacy stylesheet. Roughly a 1.2 ratio from 100 up, so the steps stay distinguishable. */ --tkc-size-100: 1.6rem; --tkc-size-200: 1.8rem; --tkc-size-300: 2rem; --tkc-size-400: 2.4rem; --tkc-size-500: 3rem; --tkc-size-600: 3.6rem; --tkc-size-700: 4.8rem; /* Font weights (3, Requirement 3.2). `medium` is the one weight the current font request does not carry; task 8.7 owns the fonts link and adds 600 there. Until then a fallback synthesizes it. */ --tkc-weight-regular: 400; --tkc-weight-medium: 600; --tkc-weight-bold: 700; /* Line heights (3, Requirement 3.2). `tight` for display headings, `normal` for prose, `loose` for long-form body copy and collapsible bodies. */ --tkc-leading-tight: 1.2; --tkc-leading-normal: 1.55; --tkc-leading-loose: 1.75; /* Spacing scale (8 steps, every step in `rem`, Requirement 3.3). */ --tkc-space-1: 0.4rem; --tkc-space-2: 0.8rem; --tkc-space-3: 1.2rem; --tkc-space-4: 1.6rem; --tkc-space-5: 2.4rem; --tkc-space-6: 3.2rem; --tkc-space-7: 4.8rem; --tkc-space-8: 6.4rem; /* Border radii (3, Requirement 3.12). `pill` is expressed in `rem` like the spacing scale rather than as a bare large number. */ --tkc-radius-sm: 0.6rem; --tkc-radius-md: 1.2rem; --tkc-radius-pill: 100rem; /* Motion durations (3, each between 120ms and 400ms, Requirement 3.12). Under `prefers-reduced-motion: reduce` the component layer renders every transition at 0ms with the element in its final state (Requirement 3.10); that override belongs with the components, not here, because a token set to 0 would hide the intent rather than state it. */ --tkc-motion-fast: 140ms; --tkc-motion-base: 220ms; --tkc-motion-slow: 360ms; /* Colors -- light appearance (8 named roles, Requirement 3.4). bg the page surface a card, a tile, a menu: anything raised off the page text body copy and headings text-muted bylines, dates, blurbs: secondary but still prose accent links, calls to action, the brand mark accent-strong hover and pressed states, and accent fills border hairlines and card edges focus the focus ring, deliberately a different hue from accent so keyboard focus is never mistaken for a hover state */ --tkc-color-bg: #fbf3e4; --tkc-color-surface: #ffffff; --tkc-color-text: #1f4a44; --tkc-color-text-muted: #7a5a48; --tkc-color-accent: #a85530; --tkc-color-accent-strong: #8f4426; --tkc-color-border: #e6e2d8; --tkc-color-focus: #1f6f87; /* Shadows (3, Requirement 3.12). The tint is derived from a named token with `color-mix()` rather than written as an `rgba()` literal, so it follows the appearance. In light appearance the ink tints the page; the dark blocks below re-derive the same three names from the dark page color, because a shadow mixed from light text would read as a glow. */ --tkc-shadow-sm: 0 1px 2px color-mix(in srgb, var(--tkc-color-text) 10%, transparent); --tkc-shadow-md: 0 2px 8px color-mix(in srgb, var(--tkc-color-text) 14%, transparent); --tkc-shadow-lg: 0 8px 24px color-mix(in srgb, var(--tkc-color-text) 18%, transparent); /* Tells the browser to render native form controls, scrollbars, and the canvas in the same appearance the tokens describe. */ color-scheme: light; } /* ------------------------------------------------------------------------- 2. System dark preference, with no explicit light selection (Requirements 3.7, 3.11) ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tkc-color-bg: #14201e; --tkc-color-surface: #1c2b28; --tkc-color-text: #e6e2d8; --tkc-color-text-muted: #cbb9a6; --tkc-color-accent: #f0c9a8; --tkc-color-accent-strong: #f7ddc4; --tkc-color-border: #33403c; --tkc-color-focus: #7fc4d8; --tkc-shadow-sm: 0 1px 2px color-mix(in srgb, var(--tkc-color-bg) 55%, transparent); --tkc-shadow-md: 0 2px 8px color-mix(in srgb, var(--tkc-color-bg) 65%, transparent); --tkc-shadow-lg: 0 8px 24px color-mix(in srgb, var(--tkc-color-bg) 75%, transparent); color-scheme: dark; } } /* ------------------------------------------------------------------------- 3. Explicit dark selection (Requirement 3.11) Same names, same values as block 2. Last in the file so an explicit dark selection wins under a system light preference. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { --tkc-color-bg: #14201e; --tkc-color-surface: #1c2b28; --tkc-color-text: #e6e2d8; --tkc-color-text-muted: #cbb9a6; --tkc-color-accent: #f0c9a8; --tkc-color-accent-strong: #f7ddc4; --tkc-color-border: #33403c; --tkc-color-focus: #7fc4d8; --tkc-shadow-sm: 0 1px 2px color-mix(in srgb, var(--tkc-color-bg) 55%, transparent); --tkc-shadow-md: 0 2px 8px color-mix(in srgb, var(--tkc-color-bg) 65%, transparent); --tkc-shadow-lg: 0 8px 24px color-mix(in srgb, var(--tkc-color-bg) 75%, transparent); color-scheme: dark; }