/* ==========================================================================
avonlake.city — Public Record Design System
tokens.css — spacing, radius, elevation, motion, layout
Source of truth: index.html (the redesigned home page).
Load AFTER colors_and_type.css:
========================================================================== */
:root{
/* ---- Spacing -----------------------------------------------------------
The home page runs an unrounded, document-derived scale. Nothing here is
invented: these are the values actually used, deduped and named. */
--sp-1: 4px; /* record-field cell gap */
--sp-2: 8px; /* icon gap, chip padding */
--sp-3: 12px; /* button padding-block, panel row padding-y */
--sp-4: 16px; /* card grid gap */
--sp-5: 20px; /* card padding-inline (mobile gutter) */
--sp-6: 22px; /* nav gap, issue-card padding-top */
--sp-7: 26px; /* section head → content */
--sp-8: 28px; /* page gutter */
--sp-9: 38px; /* margin-note → content column */
--sp-10: 48px; /* hero column gap */
--sp-11: 64px; /* band padding-block */
--sp-12: 66px; /* dark featured band padding-block */
/* Vertical rhythm, as shipped */
--band-y: var(--sp-11); /* 64px · section.band padding-block */
--band-y-dark: var(--sp-12); /* 66px · .feat padding-block */
--field-y: 60px; /* .field padding-block */
--hero-y: 56px; /* .hero padding-top */
--footer-y: 52px; /* footer padding-top (56px bottom) */
--gutter: var(--sp-8); /* 28px · .wrap padding-inline */
--gutter-sm: 20px;
/* ---- Layout ------------------------------------------------------------ */
--maxw: 1180px; /* .wrap */
--col-note: 172px; /* .doc margin-note column */
--col-cap: 240px; /* .fieldhead right caption column */
--hero-split: 1.12fr .88fr;
--feat-split: 1.1fr .9fr;
--foot-split: 1.5fr .8fr .8fr;
--method-split: 64px 1fr 1.15fr;
--header-h: 62px;
--topline-h: 3px;
--cell: 13px; /* record-field square (11px ≤560px) */
/* ---- Radius ------------------------------------------------------------
Low and deliberate. 8px is the card; 4px is the control; 2–3px is data.
999px exists ONLY on the register legend chips. Nothing else is a pill. */
--r-card: 8px;
--r-ctrl: 4px;
--r-bar: 3px;
--r-cell: 2px;
--r-inset: 0 6px 6px 0; /* callout rule, right-rounded only */
--r-tab: 0 8px 8px 8px; /* filing-tab card: top-left square */
--r-pill: 999px; /* legend chips only */
/* ---- Elevation ---------------------------------------------------------
Shadows are green-tinted (rgba of --fg), never neutral black.
Two-layer: a tight contact shadow plus a wide ambient one. */
--shadow-sm: 0 1px 2px rgba(18,36,26,.05);
--shadow: 0 2px 4px rgba(18,36,26,.04), 0 12px 28px rgba(18,36,26,.07);
--shadow-lg: 0 4px 10px rgba(18,36,26,.06), 0 24px 48px rgba(18,36,26,.10);
--shadow-in: inset 0 3px 10px rgba(0,0,0,.22); /* :active press only */
/* ---- Borders ----------------------------------------------------------- */
--bw: 1px; /* every structural rule */
--bw-note: 2px; /* margin-note top rule (1px under 1000px) */
--bw-accent:3px; /* callout left rule */
/* ---- Motion ------------------------------------------------------------
One easing curve for everything. Four durations, all sub-second except
the two narrative ones (the highlighter swipe and the split bar). */
--ease: cubic-bezier(.2,.7,.2,1);
--d-fast: .18s; /* buttons, chips, rows, nav underline */
--d-mid: .25s; /* record-field cell isolate */
--d-reveal: .65s; /* .rv scroll reveal (14px rise) */
--d-count: 1000ms; /* count-up, cubic ease-out */
--d-bar: 1.1s; /* split-bar fill */
--d-hl: .95s; /* highlighter swipe, .3s delay */
--lift: -4px; /* issue-card hover translateY (-1px for buttons) */
/* ---- Z ----------------------------------------------------------------- */
--z-sticky: 50;
--z-skip: 100;
}
/* --------------------------------------------------------------------------
Primitives shared by every surface in this system.
-------------------------------------------------------------------------- */
*{ box-sizing:border-box }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) }
@media(max-width:560px){ .wrap{ padding:0 var(--gutter-sm) } }
.card{ background:var(--evidence); border:var(--bw) solid var(--rule); border-radius:var(--r-card) }
/* Focus is a hard requirement, not a reset. Volt on dark, forest on light. */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px }
.on-dark :focus-visible{ outline-color:var(--focus-on-dark) }
/* Scroll reveal — an enhancement, never a precondition for reading content.
The hidden state is gated on .js-rv, which app.js sets on only once
it has an observer attached for every .rv on the page. Blocked, failed or
absent JS therefore leaves content visible rather than blank, and authors
no longer have to remember to omit .rv on anything that matters. */
.rv{ transition:opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease) }
.js-rv .rv{ opacity:0; transform:translateY(14px) }
.js-rv .rv.in{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){
*{ animation-duration:.001ms!important; animation-iteration-count:1!important;
transition-duration:.001ms!important }
.js-rv .rv{ opacity:1; transform:none }
/* Rule 6: nothing is reachable only through motion. app.js pre-lights .hl,
but the swipe is a CSS transform — without this, a reduced-motion reader
with JS blocked loses the highlight the headline is written around. */
.hl:before{ transform:scaleX(1) }
}