/* =====================================================================
   tokens.css — shared token layer for the Indiana water-damage sites
   ---------------------------------------------------------------------
   This file defines the SHAPE of the design system only: every token
   below has a neutral default. A city variant file (css/variants/<city>.css)
   is loaded AFTER this file and overrides the tokens it wants to own.

   Load order on every page (relative paths only):
       tokens.css  ->  variants/<city>.css  ->  base.css  ->  components.css

   Never hard-code a color, radius, shadow or font stack in page markup.
   If a page needs a new value, add a token here and set it per city.
   ===================================================================== */

:root {
  /* ---- Brand ramp -------------------------------------------------- */
  /* Primary = the trust/brand color. Used for headers, links, key rules. */
  --brand-050: #eef4f8;
  --brand-100: #d6e4ee;
  --brand-300: #8fb0c7;
  --brand-500: #33607f;
  --brand-700: #1e3d52;
  --brand-900: #122634;

  /* Urgent = the emergency/action color. Reserved for the phone CTA and
     genuine emergency signals. Do NOT use it for decoration. */
  --urgent-100: #fde3d8;
  --urgent-500: #c1441c;
  --urgent-600: #a63715;
  --urgent-700: #83290e;

  /* Neutrals — text, rules, surfaces. */
  --ink-900: #16191c;
  --ink-700: #33383d;
  --ink-500: #5b636b;
  --ink-300: #99a1a9;
  --ink-150: #d9dee2;
  --ink-075: #eef0f2;
  --paper:   #ffffff;
  --paper-alt: #f7f8f9;

  /* Semantic aliases — components reference THESE, not the ramps. */
  --c-text:        var(--ink-900);
  --c-text-muted:  var(--ink-500);
  --c-text-invert: #ffffff;
  --c-bg:          var(--paper);
  --c-bg-alt:      var(--paper-alt);
  --c-bg-deep:     var(--brand-900);
  --c-rule:        var(--ink-150);
  --c-link:        var(--brand-700);
  --c-link-hover:  var(--brand-500);
  --c-accent:      var(--brand-500);
  --c-accent-soft: var(--brand-050);
  --c-action:      var(--urgent-500);
  --c-action-hover:var(--urgent-600);
  --c-action-ink:  #ffffff;
  --c-focus:       var(--urgent-600);

  /* ---- Type -------------------------------------------------------- */
  /* Variants override the three families. Fallbacks stay web-safe so a
     blocked font request never collapses the layout. */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);

  --fw-body: 400;
  --fw-medium: 600;
  --fw-display: 700;

  /* Fluid scale. clamp() keeps mobile readable without a media query. */
  --t-xs:   0.8125rem;                                  /* 13px  labels     */
  --t-sm:   0.9375rem;                                  /* 15px  meta       */
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);   /* body             */
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* intro paragraph  */
  --t-h4:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --t-h3:   clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --t-h2:   clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --t-h1:   clamp(1.875rem, 1.5rem + 2.1vw, 3rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --measure: 68ch;          /* max line length for prose */

  --tracking-display: -0.01em;
  --tracking-label: 0.08em;

  /* ---- Space ------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-y: clamp(2.5rem, 1.6rem + 4vw, 5rem);   /* vertical section rhythm */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);        /* page side padding      */
  --wrap: 1140px;                                    /* content max width      */
  --wrap-narrow: 760px;                              /* article max width      */

  /* ---- Form -------------------------------------------------------- */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border: 1px solid var(--c-rule);
  --border-strong: 2px solid var(--c-text);

  --shadow-sm: 0 1px 2px rgba(18, 38, 52, 0.08);
  --shadow: 0 6px 18px -8px rgba(18, 38, 52, 0.28);
  --shadow-lg: 0 20px 48px -24px rgba(18, 38, 52, 0.45);

  /* Optional per-variant texture. Default: nothing. */
  --surface-texture: none;

  /* Hero ink is deliberately NOT --c-text-invert: the hero is always a deep
     dark wash, including on the dark New Castle variant where "invert" is dark. */
  --hero-ink: #ffffff;
  --hero-ink-soft: rgba(255,255,255,0.88);
  --hero-overlay: linear-gradient(180deg, rgba(18,38,52,0.62) 0%, rgba(18,38,52,0.82) 100%);

  /* ---- Motion ------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---- Layering ---------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-callbar: 50;
}

/* Respect the OS preference. Every animation in this system is decorative,
   so it is safe to remove all of it. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}