/* ============================================================
   Civic Lattice — Design Tokens
   The single source of truth for colour, type, space and depth.
   Every other stylesheet consumes these; no raw hex below this file.
   ============================================================ */

:root {
  /* ---- Brand ------------------------------------------------
     Carried over from the Civic Lattice application design system
     (public/css/lattice.css). --accent is the brand pink used for
     graphics and fills; --accent-ink is the darker pink reserved for
     TEXT and BUTTON FILLS, because #e8336d on white is only 4.09:1
     and fails WCAG AA for body-sized text. ------------------- */
  --accent:        #e8336d;
  --accent-ink:    #c4215a;   /* 5.6:1 on white — AA safe */
  --accent-deep:   #a81a4b;   /* hover / pressed */
  --accent-wash:   #fef0f5;
  --accent-line:   #f6cddd;
  --accent-rule:   #eaa3c0;   /* visible hairline / dashed rule in pink */

  /* ---- Ink & paper ---------------------------------------- */
  --ink:           #14161a;
  --ink-2:         #3d434d;
  --ink-3:         #6b727e;
  --paper:         #ffffff;
  --paper-2:       #f7f8fa;
  --paper-3:       #eef1f5;
  --line:          #e2e5ea;
  --line-soft:     #eef0f3;

  /* ---- Inverse surface (closing section, footer) ---------- */
  --ink-surface:   #101318;
  --ink-surface-2: #191d24;
  --on-ink:        #f4f5f7;
  --on-ink-2:      #a8b0bc;
  --on-ink-line:   #2a2f38;
  /* The brand pink is only 4.2:1 on the dark surface and fails AA for text.
     This lighter tint reads at ~6.9:1 and is used for anything on ink. */
  --accent-on-ink: #ff6f9c;

  /* ---- Focus --------------------------------------------- */
  --focus:         #1d4ed8;

  /* ---- Type ---------------------------------------------- */
  --font-display: 'DM Serif Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.375rem, 1.45rem + 3.7vw, 4.125rem);
  --fs-h2:      clamp(1.75rem, 1.28rem + 1.9vw, 2.625rem);
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.75rem;

  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-body:    1.62;

  --ls-label:   0.13em;
  --ls-tight:   -0.018em;

  /* ---- Space (4px base) ---------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  /* Vertical rhythm for a full-width section */
  --section-y:  clamp(3.75rem, 2rem + 7vw, 7rem);

  /* ---- Layout -------------------------------------------- */
  --container:  1260px;
  --measure:    62ch;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --header-h:   68px;

  /* ---- Shape & depth ------------------------------------- */
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  14px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(20, 22, 26, 0.05);
  --sh-md: 0 6px 24px -8px rgba(20, 22, 26, 0.14);
  --sh-lg: 0 24px 64px -24px rgba(20, 22, 26, 0.22);

  /* ---- Motion -------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:       180ms;
}