/* ==========================================================================
   PLUG Design Tokens — "field guide" edition
   --------------------------------------------------------------------------
   Warm, print-inspired identity: paper background, bookish serif display
   type, burnt-orange actions, amber marker highlights. Built for a civic
   mutual-aid project, not a SaaS template.

   Every color pair used for text carries a measured WCAG 2.1 contrast grade.
   Grades (normal text): AAA >= 7:1, AA >= 4.5:1, AA-large/UI >= 3:1.
   Full graded matrix: docs/04-design/COMPONENT_LIBRARY.md.
   ========================================================================== */

:root {
  /* ---- Surfaces --------------------------------------------------------- */
  --surface:        #ffffff; /* cards, header, panels                        */
  --surface-alt:    #faf6ef; /* page "paper" background                      */
  --surface-inset:  #f3ede1; /* wells, amenity chips                         */
  --surface-invert: #1c1917; /* footer, dark blocks (warm black)             */

  /* ---- Ink (text) — graded on --surface / --surface-alt ----------------- */
  --ink-primary:    #1c1917; /* 17.49:1 white / 16.23:1 paper — AAA          */
  --ink-secondary:  #44403c; /* 10.27:1 white /  9.54:1 paper — AAA          */
  --ink-muted:      #57534e; /*  7.63:1 white /  7.08:1 paper — AAA          */

  /* ---- Ink on --surface-invert (dark footer) ---------------------------- */
  --ink-on-invert:        #ffffff; /* 17.49:1 AAA                            */
  --ink-on-invert-soft:   #d6d3d1; /* 11.74:1 AAA                            */
  --ink-on-invert-muted:  #a8a29e; /*  6.93:1 AA — dark surfaces ONLY        */

  /* ---- Action (interactive) — burnt orange ------------------------------ */
  --action:        #9a3412; /* 7.31:1 AAA on white; white on it 7.31:1 AAA   */
  --action-hover:  #7c2d12; /* white on it 9.37:1 AAA                        */
  --action-tint:   #fef3c7; /* selected-card fill; action ink on it 6.56 AA  */
  --focus-ring:    #9a3412; /* 7.31:1 vs white — visible focus outline       */

  /* ---- Voltage accents (decorative only — never body text) --------------- */
  --volt:        #d97706; /* amber bolt strokes, small accents               */
  --volt-bright: #fbbf24; /* bolt fills                                      */
  --highlight:   #fde68a; /* marker-pen highlight; ink on it 14.04:1 AAA     */

  /* ---- Status: solid (white text on fill) ------------------------------- */
  --status-verified:  #047857; /* white 5.48:1 AA                            */
  --status-community: #b45309; /* white 5.02:1 AA                            */
  --status-recheck:   #b91c1c; /* white 6.47:1 AA                            */

  /* ---- Status: tinted (dark text on pale fill) -------------------------- */
  --status-verified-tint:  #ecfdf5;
  --status-verified-ink:   #065f46; /* 7.29:1 AAA on tint                    */
  --status-community-tint: #fffbeb;
  --status-community-ink:  #92400e; /* 6.84:1 AA on tint                     */
  --status-recheck-tint:   #fef2f2;
  --status-recheck-ink:    #991b1b; /* 7.60:1 AAA on tint                    */

  /* ---- Borders (non-text UI) -------------------------------------------- */
  --border:        #e7e0d2; /* decorative separators (warm)                  */
  --border-strong: #d6cdba; /* card outlines                                 */
  --border-input:  #78716c; /* form controls — 4.80:1 vs white (>=3:1 UI)    */

  /* ---- Typography ------------------------------------------------------- */
  /* Serif display keeps the page feeling authored, not generated. All
     stacks are system-resident: zero font downloads, zero third parties —
     the privacy claims on the page stay literally true.                     */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px — badges, meta            */
  --text-sm:   0.875rem;  /* 14px — secondary copy          */
  --text-base: 1rem;      /* 16px — body                    */
  --text-lg:   1.125rem;  /* 18px — section intros          */
  --text-xl:   1.375rem;  /* 22px — card titles, h3         */
  --text-2xl:  1.875rem;  /* 30px — h2                      */
  --text-3xl:  2.5rem;    /* 40px — hero h1 (mobile)        */
  --text-4xl:  3.5rem;    /* 56px — hero h1 (desktop)       */

  --leading-tight:  1.15;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-wide: 0.08em;  /* uppercase labels */

  /* ---- Spacing (4px base scale) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* ---- Elevation — warm-tinted, slightly "printed" ----------------------- */
  --shadow-sm: 0 1px 2px rgba(60, 42, 24, 0.08);
  --shadow-md: 0 4px 14px rgba(60, 42, 24, 0.1);
  --shadow-lg: 0 12px 32px rgba(60, 42, 24, 0.14);
  --shadow-press: 3px 3px 0 rgba(28, 25, 23, 0.9); /* chunky button offset   */

  /* ---- Motion ------------------------------------------------------------ */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 72rem;      /* 1152px content width                       */
  --container-pad: var(--space-5); /* mobile gutter — widened per breakpoint */
  --header-height: 3.75rem;

  /* Breakpoints (reference only — custom properties cannot be used in
     media queries; keep these values in sync with components.css):
       --bp-sm:  40rem   640px   large phones, small tablets
       --bp-md:  48rem   768px   tablets
       --bp-lg:  64rem  1024px   laptops
       --bp-xl:  80rem  1280px   desktops                                    */
}

@media (min-width: 48rem) {
  :root {
    --container-pad: var(--space-8);
  }
}

/* Respect reduced-motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}