/* DFC design tokens. THE single source of truth for every value on this site.
   Canonical documentation: docs/design-system.md §2.

   Rules (docs/design-system.md §1):
     - never hard-code a value that has a token here
     - component styles reference var(), they do not restate values
     - inline CSS is an exception, must still use var(), and must carry a comment

   Loaded before fonts.css and brand.css. See functions.php. */

:root {
  /* ---------- Brand color. Six colors. Fills and decoration only. ---------- */
  --color-navy:          #1A325E;   /* also THE text color */
  --color-green-dark:    #164028;
  --color-sky:           #2AA9E0;
  --color-green:         #649B5F;   /* decoration only, cannot carry text */
  --color-yellow:        #FDD769;
  --color-amber:         #F9B52B;   /* CTA fill only */

  /* ---------- Functional neutrals. Not brand colors. Warm. ---------- */
  --color-white:         #FFFFFF;
  --color-off-white:     #FDFBF7;
  --color-gray-light:    #F5F5F5;
  --color-border:        #E5E5E5;   /* decorative dividers ONLY, 1.26:1 */
  --color-border-strong: #8E8E8E;   /* interactive borders, 3.28:1 / 3.01:1 */
  --color-rule-on-dark:  #2A4470;   /* hairline on navy; decoration, never text */
  --color-rule-on-yellow: rgba(26, 50, 94, 0.22);  /* the same hairline job on #FDD769, where
                                                      --color-border falls to 1.10:1 and vanishes.
                                                      1.48:1 here. Decoration, never text. */
  --color-muted:         #6B7280;   /* captions, white/off-white surfaces only */

  /* ---------- Interactive states ---------- */
  --color-cta-hover:     #E8A625;   /* navy label 5.96:1 */
  --color-cta-active:    #D69A1F;   /* navy label 5.12:1 */
  --color-navy-hover:    #2A4D8A;   /* white label 8.31:1 */
  --color-navy-active:   #14264A;   /* white label 14.94:1 */
  --color-sky-hover:     #37AEE2;   /* navy label 5.00:1. LIGHTENS, not darkens */

  /* ---------- Status. Functional, not brand. ---------- */
  --color-error:         #8A1C1C;   /* the one addition; brand has no red */
  --color-error-tint:    #FDECEA;
  --color-success:       var(--color-green-dark);
  --color-success-tint:  #EAF3EC;
  --color-warning:       var(--color-yellow);
  --color-warning-tint:  #FEF6E0;
  --color-info:          var(--color-sky);
  --color-info-tint:     #E7F5FC;

  /* ---------- Semantic. Prefer these over the raw values above. ---------- */
  --color-text:          var(--color-navy);
  --color-text-alt:      var(--color-green-dark);
  --color-text-muted:    var(--color-muted);
  --color-text-on-dark:  var(--color-white);
  --color-surface:       var(--color-white);
  --color-surface-alt:   var(--color-off-white);
  --color-surface-sunk:  var(--color-gray-light);
  --color-surface-dark:  var(--color-navy);
  --color-surface-header: var(--color-yellow);       /* #FDD769, changed 2026-08-12 (was gray-light) */
  --color-link:          var(--color-navy);
  --color-link-on-dark:  var(--color-white);
  --color-cta:           var(--color-amber);
  --color-cta-text:      var(--color-navy);
  --color-focus:         var(--color-navy);
  --color-focus-on-dark: var(--color-yellow);

  /* ---------- Type families. Five roles, four families; the fourth is an
     exception scoped to one component, see below and fonts.css. ---------- */
  --font-display:  'Zing Rust', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-headline: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-label:    'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* EXCEPTION, 2026-09-08. A fourth family in a three-family system, scoped to
     polaroid captions and nothing else. See the note at the top of fonts.css. */
  --font-script:   'Caveat', 'Segoe Script', cursive;

  /* ---------- Type scale. Root stays 16px so browser zoom behaves. ---------- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px  <- body default */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* ---------- Weights ---------- */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Line heights ---------- */
  --leading-display: 1.0;
  --leading-tight:   1.15;
  --leading-heading: 1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-body:    1.65;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.05em;   /* uppercase buttons */
  --tracking-eyebrow: 0.08em;   /* uppercase eyebrows */

  /* ---------- Spacing. 8pt grid. ---------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 5rem;      /* 80px */
  --space-16: 6rem;      /* 96px */

  /* ---------- Layout ---------- */
  --content: 780px;
  --wide:    1200px;
  --gutter:  var(--space-5);
  --section-y: var(--space-16);

  /* ---------- Header. Height is logo height + 16px clear, to the 8pt grid. ---------- */
  --header-h:    96px;
  --logo-w:      160px;
  --nav-gap:     var(--space-6);
  /* Top-level nav item size, and it TIERS like the three above it — see
     docs/design-system.md §10.7. 18px is what the row wants; the overflow budget
     is the only reason it cannot have it everywhere, and that budget only bites
     in a narrow band just above the drawer breakpoint. Measured 2026-09-09: at
     18px the six labels need 631.7px and the row clears them from 1005px up, so
     the step below sits at 1100px and keeps a 95.8px margin rather than the
     5.8px a 1010px step would leave. Drawer widths take the LARGEST value of the
     three, because a stacked full-width list has no budget at all. */
  --nav-size:    var(--text-md);      /* 18px */

  /* ---------- Page-title band. RETIRED 2026-09-08.
     The band used to take a colour from the page's journey: yellow on Programs,
     sky on Get Help, dark green on Give, navy on About, green on Utility. That
     is over. Every title band is now transparent with navy type, so the page
     surface runs straight up to the header and the title is the first thing on
     it rather than a slab the title sits inside.

     The two tokens stay because .dfc-page-title still reads them and a journey
     class can still override them if a band is ever wanted again. The default
     is now "no band" instead of a colour. ---------- */
  --band-bg:     transparent;
  --band-text:   var(--color-navy);

  /* Icon-list shapes. SHAPES, not colours: each is used as a mask and takes its
     colour from a token at the point of use, so no component restates a hex.
     Material Symbols outlines, Apache 2.0. */
  --icon-tick:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  --icon-people:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  --icon-medical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2zm1 9h-2v2h-2v-2H9v-2h2v-2h2v2h2v2z'/%3E%3C/svg%3E");
  --icon-heart:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");

  /* ---------- Shape ---------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- Elevation. Navy-tinted; black reads dead on warm surfaces. ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 50, 94, 0.06);
  --shadow:    0 4px 12px rgba(26, 50, 94, 0.10);
  --shadow-lg: 0 12px 28px rgba(26, 50, 94, 0.14);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration:      250ms;
  --ease:          cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- Focus ---------- */
  --focus-width:  3px;
  --focus-offset: 2px;

  /* ---------- Z-index. Never write a raw z-index. ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* Laptop: container un-caps. Layout only, type is unchanged.
   The nav gap MUST tighten here, not at 980px. 981px is the narrowest the
   horizontal nav ever has to survive (it collapses below that), and the
   overflow budget in docs/design-system.md §10.7 is calculated at 24px gaps.
   Leaving it at 32px through this tier costs 40px and eats the whole margin. */
@media (max-width: 1199px) {
  :root {
    --logo-w:  160px;
    --nav-gap: var(--space-5);   /* 24px */
  }
}

/* Narrow laptop: the ONLY tier where the overflow budget outranks the nav size.
   This band is 981-1099px, the last stretch before the drawer takes over, and it
   is the one place the six labels at 18px do not fit on one row. They need
   631.7px; the row has 608.5px at 981px and does not clear them until 1005px.
   16px needs 585.9px and fits the whole band with 22.6px to spare at its worst.

   The step is here rather than at the measured 1005px so it carries a real
   margin (95.8px at 1100px) instead of 5.8px. 1024-1099px would in fact take
   18px, on ~20-36px of slack — see §10.7 before trading margin for coverage. */
@media (max-width: 1099px) {
  :root {
    --nav-size: var(--text-base);   /* 16px */
  }
}

/* Tablet: type steps down, grids go 2-up. */
@media (max-width: 980px) {
  :root {
    --section-y: var(--space-10);   /* 64px */
    --header-h:  88px;
    --logo-w:    140px;
    /* Up, not down, and it must come AFTER the 1099px block to win the cascade.
       The drawer is a stacked full-width list, so no budget applies and this is
       the tier where a bigger tap label pays most. GET INVOLVED, the longest
       label, measures 150px inside a 328px content box at 360px. */
    --nav-size:  var(--text-lg);    /* 20px */
  }
}

/* Mobile: type steps down again, single column. */
@media (max-width: 767px) {
  :root {
    --section-y: var(--space-8);    /* 48px */
    --header-h:  80px;
    --logo-w:    120px;             /* brand guide floor, never lower */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; }
}