/* ============================================================================
   LDS portal — design tokens (Portal Reboot R1, 2026-05-31)
   Single source of truth. Matches lds_brand.py (deck/docx side).
   Everything else (components.css, page styles) references these.
   ========================================================================== */
:root {
  /* Brand */
  --c-forest:    #1F4D3C;
  --c-forest-d:  #123328;
  --c-moss:      #97BC62;
  --c-sage:      #C8D4CE;
  --c-cream:     #F7F4EC;
  --c-paper:     #FFFFFF;
  --c-ink:       #1A1A1A;
  --c-ink-soft:  #55605A;
  --c-gold:      #C4993A;
  --c-warn:      #C0553C;

  /* Soft tints — for icon circles, alert backgrounds */
  --c-cream-soft: #FBF9F2;       /* icon circle default */
  --c-moss-soft:  #E8F0DC;       /* "ok" pill, low-emphasis success */
  --c-warn-soft:  #FBECE6;       /* "warn" pill, gentle */
  --c-gold-soft:  #F6EBCF;       /* "highlight" pill */

  /* Radii — softer than the legacy 4-8px */
  --r-xs:  6px;        /* form inputs, micro-pills */
  --r-sm:  10px;       /* small chips */
  --r-md:  14px;       /* cards, buttons */
  --r-lg:  20px;       /* hero, big surfaces */
  --r-pill: 9999px;    /* fully rounded */

  /* Spacing — 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Type — match lds_brand.py.
     Fraunces is the brand display serif (loaded via Google Fonts on every
     portal page); Georgia is the offline fallback. Listing Fraunces first
     makes the token honest — the hero title now matches the panel headings,
     which already force Fraunces in styles.css. */
  --f-head:  "Fraunces", Georgia, "Iowan Old Style", "Apple Garamond", "Baskerville", serif;
  --f-body:  "Manrope", Calibri, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-eyebrow:   10px / 1.2  var(--f-body);  /* MOSS, uppercase, +0.12em letter-spacing */
  --t-body:      14px / 1.55 var(--f-body);
  --t-body-lg:   16px / 1.55 var(--f-body);
  --t-h3:        18px / 1.25 var(--f-head);
  --t-h2:        22px / 1.2  var(--f-head);
  --t-h1:        32px / 1.1  var(--f-head);
  --t-hero:      48px / 1.05 var(--f-head);
  --t-stat:      40px / 1.0  var(--f-head);
  --t-stat-lg:   56px / 1.0  var(--f-head);

  /* Shadows — almost invisible, only on lifted surfaces */
  --shadow-1: 0 1px 2px rgba(20, 35, 26, 0.04), 0 1px 1px rgba(20, 35, 26, 0.02);
  --shadow-2: 0 6px 16px rgba(20, 35, 26, 0.06), 0 2px 4px rgba(20, 35, 26, 0.03);

  /* Borders */
  --border-hairline: 1px solid var(--c-sage);

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow: 550ms cubic-bezier(0.2, 0.8, 0.2, 1);  /* FLIP re-order, line trace */
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================================
   Iconography helpers — Lucide sprite at /styles/icons.svg
   Usage: <svg class="lds-icon"><use href="/styles/icons.svg#icon-zap"></use></svg>
   stroke-width 1.5 per the brand brief (Lucide ships at 2).
   ========================================================================== */
.lds-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke-width: 1.5;
  vertical-align: middle;
}
.lds-icon--18 { width: 18px; height: 18px; }  /* list items, secondary inline */
.lds-icon--16 { width: 16px; height: 16px; }  /* micro pills, status badges */
.lds-icon--24 { width: 24px; height: 24px; }  /* hero accent only */

/* Containment — stat-card icon circle (32px, cream-soft, forest stroke) */
.lds-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-cream-soft);
  color: var(--c-forest);
  flex: 0 0 auto;
}
/* Alert variant — 24px, warn-soft, warn stroke */
.lds-icon-circle--alert {
  width: 24px;
  height: 24px;
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* ============================================================================
   Product shield helper — Lantern (OnDark canonical) at /styles/shields/
   Usage: <svg class="lds-shield"><use href="/styles/shields/Lantern_Shield_OnDark.svg#shield"/></svg>
   ========================================================================== */
.lds-shield {
  width: 48px;          /* hero placement */
  height: 48px;
  flex: 0 0 auto;
}
.lds-shield--inline { width: 32px; height: 32px; }  /* household header / breadcrumb */
@media (max-width: 640px) {
  .lds-shield { width: 40px; height: 40px; }        /* hero on mobile */
}

/* ============================================================================
   Visual Refresh R3 (2026-06-20) — semantic + status + data-viz + density.

   WHY: the live portal (styles.css + portal.js) historically hard-coded a
   teal/amber/beige palette (#0f766e, #d97706, #fbfaf7 ...) that diverged from
   the forest-green brand. This layer makes forest-green the single source of
   truth: the semantic aliases below let legacy `var(--accent)` / `var(--muted)`
   usages resolve to brand tokens, and the status + viz tokens give one place
   for every state colour so the JS can't drift again.

   ACCESSIBILITY CONTRACT:
   - Status colours are tuned so the *-ink text meets WCAG AA (≥4.5:1) on its
     own *-bg. Verified pairings noted inline.
   - Status is NEVER colour-alone: every status chip / risk card / trend marker
     must also carry an icon + word in the markup (the renderer enforces this).
   - Data-viz hues differ in *lightness* as well as hue, so series stay
     distinguishable in greyscale / for colour-blind advisers; secondary series
     also use dash patterns in the SVG.
   ========================================================================== */
:root {
  /* --- Semantic aliases — retire the legacy teal accent for forest-green --- */
  --accent:        var(--c-forest);     /* primary action / links / chart elec */
  --accent-strong: var(--c-forest-d);   /* hover / pressed */
  --accent-soft:   var(--c-moss-soft);  /* selected-chip wash, low-emphasis */
  --on-accent:     var(--c-paper);      /* text/icons on an accent surface */
  --ink:           var(--c-ink);
  --muted:         var(--c-ink-soft);
  --panel:         var(--c-paper);
  --panel-soft:    var(--c-cream-soft); /* nested cards, gene rows, notes */
  --border:        var(--c-sage);
  --border-strong: #AEBFB6;             /* table header rule, a step past sage */
  --shadow:        var(--shadow-1);     /* legacy single-name shadow alias */

  /* --- Status system — text meets AA on its paired soft background --------- */
  /* OK / steady — forest-derived green (#1B5E43 on #E8F0DC ≈ 6.4:1) */
  --status-ok-ink:        #1B5E43;
  --status-ok-bg:         var(--c-moss-soft);
  --status-ok-border:     #7FB069;
  /* WATCH / amber — darkened so it passes AA (#8A4B16 on #FBEBD2 ≈ 5.6:1) */
  --status-watch-ink:     #8A4B16;
  --status-watch-bg:      #FBEBD2;
  --status-watch-border:  #D9943B;
  /* ALERT / call now — warm red (#A23320 on #FBECE6 ≈ 6.1:1) */
  --status-alert-ink:     #A23320;
  --status-alert-bg:      var(--c-warn-soft);
  --status-alert-border:  var(--c-warn);
  /* INFO / loading — forest on a cool tint (#1F4D3C on #EAF1EE ≈ 8.0:1) */
  --status-info-ink:      var(--c-forest);
  --status-info-bg:       #EAF1EE;
  --status-info-border:   #9DBBAE;
  /* NEUTRAL — quiet grey (#55605A on #EEF0EC ≈ 6.0:1) */
  --status-neutral-ink:   var(--c-ink-soft);
  --status-neutral-bg:    #EEF0EC;
  --status-neutral-border: var(--c-sage);

  /* --- Data-viz palette — brand-anchored, greyscale-distinguishable -------- */
  --viz-elec:        var(--c-forest);   /* electricity — primary series */
  --viz-elec-fill:   rgba(31, 77, 60, 0.12);
  --viz-gas:         var(--c-gold);     /* gas */
  --viz-gas-fill:    rgba(196, 153, 58, 0.12);
  --viz-export:      #6B8E5A;           /* export — also dashed in the SVG */
  --viz-export-fill: rgba(107, 142, 90, 0.12);
  --viz-carbon:      var(--c-ink-soft); /* carbon */
  --viz-grid:        #E4E9E5;           /* gridlines */
  --viz-axis:        #8A958F;           /* axis labels / ticks */

  /* --- Density — comfortable by default; body.is-compact tightens the rhythm.
     Independent of the volunteer/detailed CONTENT toggle (§3 density toggle). --- */
  --density-row-pad:  0.7rem 0.75rem;   /* table/list cell padding */
  --density-card-gap: 16px;             /* household grid gap */
  --density-card-pad: 18px;             /* household card padding */
  --density-card-min: 238px;            /* household card min-height */
}

/* Compact density: tighter rhythm so an adviser fits more households on screen. */
body.is-compact {
  --density-row-pad:  0.5rem 0.6rem;
  --density-card-gap: var(--s-3);
  --density-card-pad: 13px;
  --density-card-min: 188px;
}