/* ==========================================================================
   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:
     <link rel="stylesheet" href="colors_and_type.css">
     <link rel="stylesheet" href="tokens.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 — content is visible without JS if you omit .rv. */
.rv{ opacity:0; transform:translateY(14px);
     transition:opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease) }
.rv.in{ opacity:1; transform:none }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important;
     transition-duration:.001ms!important }
  .rv{ opacity:1; transform:none }
}