/* option-b.css — "Midnight". The same chrome, rendered dark. * * Dark comes from tokens.css's own [data-theme="dark"] block — validated * independently against its own surface, never an inversion of light. The page * sets data-theme="dark" on and changes nothing else about colour. * The only additions here are two pieces of dark-specific CRAFT. */ :root { --page-pad-y: var(--s-8); --page-pad-x: var(--s-8); --page-max: 1240px; --title-size: var(--t-24); --title-weight: 600; --stat-size: var(--t-30); --stat-weight: 600; --panel-title-size: var(--t-14); --card-pad: var(--s-4) var(--s-5) var(--s-5); --card-pad-x: var(--s-5); --panel-gap: var(--s-4); --row-pad: 11px; --cell-size: var(--t-13); --btn-h: 34px; --btn-pad: 14px; --btn-primary-bg: var(--brand-orange); --link-ink: var(--ink-muted); --elev: 0 1px 2px rgba(0,0,0,.35); --panel-rule: 1px solid var(--border); } /* A one-pixel lit top edge. Cheap, and it is most of what separates a dark card that looks lit from one that looks like a grey rectangle. */ .card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); } /* Status dots carry a soft halo on dark, where a 7px dot otherwise disappears. */ .feed-dot.ok { box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 22%, transparent); } .feed-dot.err { box-shadow: 0 0 0 3px color-mix(in oklab, var(--critical) 22%, transparent); } .switcher a.is-here { background: var(--brand-orange); }