/* Generic City construction primitives. Opt-in classes — later shared-component plans add `.fp-city-print-surface` and `.fp-city-reactive-surface` at owned component boundaries. These are not blanket card selectors. Tokens live on any `[data-style="city"]` element (root-scoped via the `:root[data-style="city"]` blocks); the identity runtime sets `data-style` on before first paint. */ [data-style="city"] { --fp-ink: var(--c-outline); --fp-outline-width: 2px; --fp-hard-shadow: 4px 5px 0 color-mix(in srgb, var(--fp-ink) 18%, transparent); --fp-hard-shadow-hover: 6px 7px 0 color-mix(in srgb, var(--fp-ink) 22%, transparent); --fp-card-radius: 8px; --fp-label-offset: -7px; --fp-focus-ring-width: 3px; } :root[data-style="city"] { font-synthesis-weight: none; } /* City headlines render at the engine-set display weight (Darumadrop One is a single 400 cut; relying on the browser to synth heavier weights is ugly). */ :root[data-style="city"] .font-display { font-weight: var(--font-display-weight); } :root[data-style="city"] :focus-visible { outline: var(--fp-focus-ring-width) solid var(--color-tertiary); outline-offset: 3px; } [data-style="city"] .fp-city-print-surface { border: var(--fp-outline-width) solid var(--fp-ink); border-radius: var(--fp-card-radius); box-shadow: var(--fp-hard-shadow); } [data-style="city"] .fp-city-reactive-surface { transition: transform 180ms ease, box-shadow 180ms ease; } [data-style="city"] .fp-city-reactive-surface:hover, [data-style="city"] .fp-city-reactive-surface:focus-visible { box-shadow: var(--fp-hard-shadow-hover); transform: translate(-1px, -2px); } @media (prefers-reduced-motion: reduce) { [data-style="city"] .fp-city-reactive-surface { transition: none; } [data-style="city"] .fp-city-reactive-surface:hover, [data-style="city"] .fp-city-reactive-surface:focus-visible { transform: none; } }