/* ========================================================================== Design tokens — jeremyronking.com Dark is the default ground. Light is an attribute override on , set before first paint by the bootstrap script in fragments/head.html. Only tokens flip between themes; no component carries a per-theme rule. ========================================================================== */ :root { /* ground — dark (default) */ --pg: #0c1319; /* page background */ --pg2: #111a22; /* raised surface: console, code blocks, toolbars */ --ink: #e7edf2; /* primary text */ --dim: #8ea2b2; /* secondary text, meta */ --line: #243240; /* hairline borders — the single structural device */ /* accent — steel blue, mono palette */ --acc: #94bce3; /* accent on dark ground */ --acc-solid: #5980a6; /* the solid fill: primary buttons, duotone wash */ --acc-deep: #1d2d3d; /* full accent field, image underlay */ --acc-tint: rgba(148, 188,227, .10); --grid: rgba(148, 188,227, .06); /* blueprint grid lines */ /* the wash an image is duotoned into, and how far it is knocked back */ --duo: var(--acc-solid); --duo-opacity: .9; /* type */ --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* shape — nothing is rounded */ --radius: 0; --gutter: 48px; --gutter-tight: 28px; --measure: 44rem; --measure-article: 46rem; /* prose stays readable; wide media breaks out of it */ --max: 1240px; --max-wide: 1320px; /* the only shadows in the system, and only on fixed overlays */ --shadow-overlay: 0 14px 44px rgba(0, 0, 0, .4); --shadow-panel: 0 30px 80px rgba(0, 0, 0, .5); color-scheme: dark; } [data-theme="light"] { --pg: #f2f2f3; --pg2: #e9e9ea; --ink: #1d1f20; --dim: #5d5d60; --line: #d4d4d7; --acc: #416180; /* deep step — legible at paragraph size on light */ --acc-solid: #5980a6; --acc-deep: #1d2d3d; --acc-tint: rgba(89, 128, 166, .08); --grid: rgba(29, 31, 32, .05); --duo-opacity: .82; /* the wash reads heavier on the light ground */ color-scheme: light; } /* ========================================================================== Typeface switcher. Three pairings, all of which hold the layout. Mono is always JetBrains Mono. Driven from --font-heading / --font-body only. ========================================================================== */ body.font-alt-1 { --font-heading: "Archivo Narrow", "Barlow Condensed", system-ui, sans-serif; --font-body: "Archivo", "Barlow", system-ui, sans-serif; } body.font-alt-2 { --font-heading: var(--font-mono); --font-body: "Barlow", system-ui, sans-serif; }