/* ========================================================================== Deskrune — Element-level v2 IMPECCABLE pass (universal) File: /assets/v2-elements-v20260508b.css Scope: every BUTTON, every INPUT, every LINK, every focus state across the entire site. Loaded LAST in after style.css, contrast-fixes, theme.css, and any page-specific v2-*.css. This file is THE final say on element-level micro-polish. Reuses the canonical --ds-* tokens from theme.css for color so dark mode is automatic. Brand orange is #c9613f (light) / lighter coral derivative in dark mode via the token system. No new color tokens introduced. Layered as @layer impeccable so we beat author-stylesheet specificity without resorting to !important when possible. Where legacy contrast-fixes use !important on the same selector, we explicitly match it. Each block is commented with category + principle. ========================================================================== */ @layer impeccable { /* ========================================================================== UNIVERSAL — applies to every interactive node site-wide ========================================================================== */ /* -------------------------------------------------------------------------- U1. Selection color — branded. Principle: when a user highlights any text, the selection feels like the brand, not a default OS blue. rgba so text contrast remains. -------------------------------------------------------------------------- */ ::selection { background: rgba(201, 97, 63, 0.25); color: var(--ds-ink, #14140e); } :root[data-theme="dark"] ::selection { background: rgba(232, 133, 106, 0.32); color: var(--ds-ink, #f0e9dc); } /* -------------------------------------------------------------------------- U2. Custom branded scrollbars (WebKit + Firefox). Principle: chrome details belong to the brand. 8px is wide enough to grab on trackpads, narrow enough not to dominate. -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: rgba(201, 97, 63, 0.32) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(201, 97, 63, 0.30); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: rgba(201, 97, 63, 0.55); } :root[data-theme="dark"] * { scrollbar-color: rgba(232, 133, 106, 0.36) transparent; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(232, 133, 106, 0.32); } :root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(232, 133, 106, 0.55); } /* -------------------------------------------------------------------------- U3. Universal :focus-visible ring — final word. Principle: every keyboardable element gets a 2px brand orange ring with 2px offset. NEVER suppressed by `*` rules. Works in both modes via the --ds-accent token. We use double-layer (outline + box-shadow halo) for 3:1+ non-text contrast on busy backgrounds (WCAG SC 1.4.11). -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], label):focus { outline: none; } :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], label):focus-visible { outline: 2px solid var(--ds-accent, #c9613f); outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 4px rgba(201, 97, 63, 0.18); transition: box-shadow 120ms ease-out; } :root[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], label):focus-visible { outline-color: var(--ds-accent, #e8856a); box-shadow: 0 0 0 4px rgba(232, 133, 106, 0.24); } /* ========================================================================== BUTTONS — every