/* ===================================================================== avtoshyna.info · design tokens · design/tokens.css The ONLY file in the project where a hex colour may appear. Copied byte-for-byte to public/css/tokens.css by the build. Light theme is the default; dark follows prefers-color-scheme unless pins a theme (localStorage toggle). ===================================================================== */ :root { color-scheme: light dark; /* ---- colour, light (contrast ratios against --paper) ---------------- */ --paper: #F4F4F2; /* page, inputs, cards */ --panel: #EBEBE8; /* tinted panels, sticky table heads, hover rows */ --panel-2: #E2E3DF; /* search , pressed states, deeper panel */ --ink: #1F201E; /* body text, headings 14.9:1 */ --ink-2: #4F524E; /* secondary text, captions 7.2:1 */ --line: #D3D5D2; /* hairlines decorative */ --line-strong: #7E8890; /* inherited grid grey: UI borders 3.3:1 (non-text) */ --accent: #B03D0A; /* burnt orange from the old #CC3300 5.4:1 (5.0 on panel)*/ --on-accent: #F4F4F2; /* text on accent fills 5.4:1 */ --tile: #1F201E; /* family stamps */ --on-tile: #F4F4F2; /* 14.9:1 on tile */ --on-tile-2: #B3B6B0; /* 8.7:1 on tile */ --focus: #B03D0A; --shadow: 31 32 30; /* rgb triplet for the one menu shadow, tinted to ink */ --grain-opacity: .045; /* ---- type ----------------------------------------------------------- */ --font-sans: "Fixel Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Fixel Display", "Fixel Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace; --fs-0: 0.8125rem; /* 13 captions, table meta, dial labels (the floor) */ --fs-1: 0.9375rem; /* 15 small UI, blurbs, rail links */ --fs-2: 1.0625rem; /* 17 body on phones */ --fs-3: 1.125rem; /* 18 body on desktop, ledes */ --fs-4: 1.3125rem; /* 21 h3, list titles */ --fs-5: 1.5625rem; /* 25 h2 */ --fs-6: 1.875rem; /* 30 h1 on phones, stamp word (max) */ --fs-7: 2.375rem; /* 38 h1 on desktop */ --fs-8: 3.25rem; /* 52 the lead number */ --lh-body: 1.6; --lh-tight: 1.15; --measure: 68ch; /* ---- space, 4 px base ----------------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* ---- layout ----------------------------------------------------------- */ --wrap: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); --rail: 300px; /* article rail at 1024+ */ --rail-hub: 320px; /* hub rail at 1024+ */ --radius: 3px; /* one radius for everything */ --tap: 44px; /* minimum interactive height */ --thumb-w: 120px; --thumb-h: 80px; /* hub row thumb */ --card-w: 96px; --card-h: 64px; /* related card thumb */ --face: 40px; /* byline bust thumbnail */ /* ---- motion ----------------------------------------------------------- */ --dur: 120ms; /* hover/active feedback */ --dur-needle: 400ms; /* speedometer needle */ --ease: cubic-bezier(.2, .7, .3, 1); /* ---- z-index scale ----------------------------------------------------- */ --z-grain: 1; --z-sticky: 10; --z-nav: 20; --z-skip: 30; } /* breakpoints (custom properties cannot be used in @media; keep in sync): 640 two-column lists, thumbnails appear, prev/next side by side 768 three-column stamps, body 18 px, two-column contents list 1024 desktop nav, side rail, 5/7 hero, 7/5 letter 1280 nothing changes; the wrap caps at 1200 */ /* ---- dark: system preference unless pinned light ---------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #171817; --panel: #212321; --panel-2: #2B2D2A; --ink: #ECECE8; /* 15.0:1 */ --ink-2: #B3B6B0; /* 8.7:1 */ --line: #33352F; --line-strong: #7E8890; /* 4.9:1 */ --accent: #F08B52; /* 7.2:1 (6.4 on panel) */ --on-accent: #171817; /* 7.2:1 */ --tile: #212321; --on-tile: #ECECE8; --on-tile-2: #B3B6B0; --focus: #F08B52; --shadow: 0 0 0; --grain-opacity: 0; } } /* ---- dark: pinned by the toggle ---------------------------------------- */ :root[data-theme="dark"] { --paper: #171817; --panel: #212321; --panel-2: #2B2D2A; --ink: #ECECE8; --ink-2: #B3B6B0; --line: #33352F; --line-strong: #7E8890; --accent: #F08B52; --on-accent: #171817; --tile: #212321; --on-tile: #ECECE8; --on-tile-2: #B3B6B0; --focus: #F08B52; --shadow: 0 0 0; --grain-opacity: 0; }