/* ========================================================================== jd-intel — design tokens, fonts, resets (redesign) Drop into the AFTER the inline no-flash theme snippet (see theme.js). The design uses inline styles referencing these custom properties; the token VALUES are the contract, not the delivery mechanism. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Schibsted+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* surfaces */ --bg:#fbfbfa; --surface:#ffffff; --surface-2:#f5f5f3; --surface-3:#efefec; /* text */ --fg:#16161a; --fg-2:#55555e; --fg-3:#97979f; /* lines */ --line:#e9e9e5; --line-2:#dededa; /* primary button (inverts in dark) */ --ink:#18181b; --ink-fg:#fbfbfa; /* elevation */ --shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 56px -28px rgba(0,0,0,.16); /* flex points */ --display-font:'Schibsted Grotesk', sans-serif; --pad-scale:0.72; --measure:720px; } :root[data-theme="dark"]{ --bg:#0b0b0c; --surface:#101012; --surface-2:#161618; --surface-3:#1d1d20; --fg:#ededee; --fg-2:#a2a2aa; --fg-3:#6c6c74; --line:#1e1e22; --line-2:#28282d; --ink:#ededee; --ink-fg:#0b0b0c; --shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 56px -28px rgba(0,0,0,.6); } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--fg); font-family:'Schibsted Grotesk', sans-serif; -webkit-font-smoothing:antialiased; } /* IMPORTANT: do not add transition:background/color to elements whose color comes from a themed var() — the property gets stuck at the old value until reflow and the theme switch looks half-applied. Keep theme switching instant. */ @keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} } @keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }