/* ==========================================================================
   Fundación Un Lugar — design tokens (Brand Guide v0.1, §3–§5, §8)
   Working values; see DECISIONS.md 2026-09-20 and 2026-09-24. No framework.
   Iteration 3 (2026-09-24): colours unchanged; larger and tighter type scale,
   12-column grid, one spacing scale, larger radii for photographs, one
   brand-blue band (results). Everything new here is a proposal until the
   owner accepts the iteration (see PROJECT_BRIEF.md).
   ========================================================================== */
:root {
  /* Color — §3.1 */
  --blue-600: #1F64BF;   /* primary actions, links, accents (5.8:1 on white) */
  --blue-500: #267CED;   /* hover/active of primary; focus ring (large text/UI only) */
  --blue-200: #A0CCF2;   /* soft tints, hairlines on white */
  --blue-100: #DEEDFA;   /* derived: blue-200 at 35 % over white — hairlines, borders */
  --blue-050: #EEF4FC;   /* derived: blue-200 at ~15 % over white — light section bands, tags */
  --navy-900: #0C274A;   /* footer only (15:1 with white) */
  --navy-700: #123C73;   /* headings, badges, secondary emphasis */
  --gold-600: #E3B142;   /* RESERVED: donation action only (header "Dona", hero "Apadrina"). Lightened 2026-09-20 (was #BF871F); navy text on it = 7.6:1 */
  --gold-500: #EBBD52;   /* hover for gold (lighter, not darker — navy text 8.5:1) */
  --grey-800: #333333;   /* body text (12.6:1 on white) */
  --grey-700: #5C5C5C;   /* secondary text (6.7:1) */
  --grey-300: #DADADA;   /* neutral border fallback */
  --grey-100: #F2F2F2;   /* neutral fallback surface */
  --white: #FFFFFF;

  /* Semantic aliases */
  --color-bg: var(--white);
  --color-bg-alt: var(--blue-050);     /* light blue band (iteration 2 proposal) */
  --color-bg-brand: var(--blue-600);   /* iteration 3 proposal: one saturated band for the results; white text 5.8:1 */
  --color-bg-dark: var(--navy-900);    /* footer only */
  --color-text: var(--grey-800);
  --color-heading: var(--navy-700);
  --color-text-muted: var(--grey-700);
  --color-link: var(--blue-600);
  --color-rule: var(--blue-100);       /* hairlines between items (decorative, not needed for meaning) */
  --color-focus: var(--blue-500);

  /* Typography — §4 (Poppins 400/500/600). Fluid from 360 px to 1280 px.
     Iteration 3 proposal: display 40 → 72 px (guide said 36 → 56), h2 30 → 46 px (24 → 32),
     tighter tracking on large sizes, lead paragraph style. */
  --font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.72rem + 3.48vw, 4.5rem);      /* 40 → 72 px */
  --fs-page-title: clamp(2.125rem, 1.56rem + 2.44vw, 3.5rem); /* 34 → 56 px: interior-page h1 (pages.css, 2026-09-24) */
  --fs-h2: clamp(1.875rem, 1.48rem + 1.74vw, 2.875rem);       /* 30 → 46 px */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);          /* 20 → 24 px */
  --fs-h3-lg: clamp(1.5rem, 1.34rem + 0.7vw, 2rem);           /* 24 → 32 px: the three protective factors */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);    /* 18 → 21 px */
  --fs-body: clamp(1rem, 0.96rem + 0.16vw, 1.09375rem);       /* 16 → 17.5 px */
  --fs-small: 0.875rem;                                       /* 14 px */
  --fs-eyebrow: 0.8125rem;                                    /* 13 px, uppercase */
  --fs-button: 1rem;                                          /* 16 px */
  --fs-stat: clamp(3rem, 2.02rem + 4.35vw, 5.5rem);           /* 48 → 88 px */
  --lh-body: 1.65;
  --lh-heading: 1.12;
  --lh-display: 1.04;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* Spacing (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 2.6rem + 6.2vw, 7.5rem);   /* 64 px at 360 → 120 px at 1280 */

  /* Layout — 4 columns on phones (single stack), 12 columns from 1024 px */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);      /* 16 px side gutter at phone width → 40 px */
  --container: 76rem;                                  /* 1216 px including gutters */
  --grid-gap: clamp(1rem, 0.5rem + 2vw, 2rem);         /* 16 → 32 px */
  --measure: 36rem;                                    /* ~65 characters of body text */

  /* Shape — §5 pill buttons (30 px), cards, photographs */
  --radius-pill: 30px;
  --radius-card: 20px;
  --radius-media: 28px;   /* iteration 3 proposal: softer, larger radius for photographs */
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(31, 100, 191, 0.06), 0 12px 32px rgba(31, 100, 191, 0.10);
  --shadow-media: 0 30px 60px -28px rgba(12, 39, 74, 0.45);

  /* Interaction */
  --target-min: 44px;
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;
  --transition: 180ms ease;
}