/* ============================================================ * dh-tokens.css — page-wide visual tokens for deinehaut * * Owns: * - One consistent focus ring (terracotta #B85543) across all * color schemes. * - Restrained hover/active treatment for buttons and links. * - Small accent utilities (.dh-accent, .dh-pill, .dh-strike, * .dh-rule) for use inside sections — never as a section * background. * * Rules: * - Do not override Dawn defaults beyond focus + accent. * - All motion guarded by prefers-reduced-motion. * - Hex values are the canonical brand palette — see * agentic/principles/design.md. * ============================================================ */ /* ---------- Focus ring: consistent across all schemes ---------- * * Specificity ladder this rule has to beat: * - Dawn `*:focus-visible` in assets/base.css:718 (0,0,0,1) * - Dawn `.focused` in assets/base.css:725 (0,0,1,0) * - Dawn `.focus-inset:focus-visible` in base.css:735 (0,0,2,0) * - Dawn `.focused.focus-inset` in base.css:741 (0,0,2,0) * - Dawn `.focus-offset:focus-visible` in base.css:757 (0,0,2,0) * - Dawn `.focus-offset.focused` in base.css:763 (0,0,2,0) * * We include all of Dawn's class-bearing selectors in the same rule so * we win on equal specificity via later-source-order (dh-tokens.css is * loaded after base.css in theme.liquid). */ a:focus-visible, button:focus-visible, .button:focus-visible, [role='button']:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .focus-inset:focus-visible, .focus-offset:focus-visible, .focused, .focused.focus-inset, .focus-offset.focused { outline: 2px solid #b85543; outline-offset: 2px; border-radius: 2px; box-shadow: none; } /* Suppress Dawn's default ring duplication when our focus state owns it. */ a:focus-visible, button:focus-visible, .button:focus-visible, summary:focus-visible, .focus-inset:focus-visible, .focus-offset:focus-visible, .focused { --focus: 0 0 0 0 transparent; } /* Product card cover links: Dawn intentionally suppresses outline on * the itself and paints the focus ring on the .card__heading a::after * pseudo-element so the whole card border is highlighted. We do the same * but in terracotta to stay consistent with the brand focus ring. * * Specificity ladder we have to beat: * - `.card__heading a:focus-visible::after` (0,1,3,2) in * assets/component-card.css:368. * * Source order: dh-tokens.css is loaded in , but * component-card.css is loaded by `sections/featured-collection.liquid` * inline in the body — so Dawn's rule arrives AFTER ours in the * cascade. With equal specificity Dawn wins. We cannot reorder the * section stylesheet without editing the section liquid (out of scope * for this iteration), so the outline declaration uses !important here. * Scoped narrowly to the outline property only — box-shadow is also * reset so the dark default halo does not bleed through. */ .card__heading a:focus-visible::after, .card__heading a:focus::after { outline: 2px solid #b85543 !important; outline-offset: 0.3rem !important; box-shadow: none !important; } /* ---------- Hover + active: one treatment per family ---------- */ @media (prefers-reduced-motion: no-preference) { .button, button.button, a.button { transition: transform 140ms ease-out, box-shadow 140ms ease-out; } .button:hover, button.button:hover, a.button:hover { transform: translateY(-1px); } .button:active, button.button:active, a.button:active { transform: translateY(0); transition-duration: 60ms; } } /* Inline text links inside copy blocks get a underline-offset shift * instead of a color flip. Scoped to rich-text and section bodies so * we do not affect nav, footer, breadcrumb, or card links. */ .rich-text a, .dh-prose a, .dh-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-underline-offset 140ms ease-out; } @media (prefers-reduced-motion: no-preference) { .rich-text a:hover, .dh-prose a:hover, .dh-link:hover { text-underline-offset: 4px; } } /* ---------- Accent utilities ---------- */ /* Terracotta text accent — only for short labels, prices, eyebrows. * Never for body paragraphs on sand or bone (contrast fails AA). */ .dh-accent { color: #b85543; } /* Small inline pill, e.g. savings tag or "neu" label. */ .dh-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.7em; background: #b85543; color: #f5f0e6; font-size: 0.75em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; line-height: 1.2; white-space: nowrap; } /* Strikethrough background for price anchors. */ .dh-strike { position: relative; display: inline-block; color: rgba(31, 29, 26, 0.55); } .dh-strike::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: #b85543; transform: translateY(-50%) rotate(-4deg); transform-origin: center; } /* Hairline rule in terracotta — for section dividers when needed. */ .dh-rule { display: block; width: 2.4rem; height: 1px; margin: 0 0 1.6rem; background: #b85543; }