/* ==========================================================================
   DFW Immigrant Law Center — Design tokens
   Palette derived from the organization's seal. 4px spacing base, 6px radii.
   ========================================================================== */

:root {
  /* Brand colour system */
  --ink: #212934;
  --ink-80: rgba(33, 41, 52, 0.8);
  --ink-70: rgba(33, 41, 52, 0.72);
  --ink-55: rgba(33, 41, 52, 0.56);
  --ink-12: rgba(33, 41, 52, 0.12);
  --ink-08: rgba(33, 41, 52, 0.08);
  --ink-04: rgba(33, 41, 52, 0.04);

  --cream: #fbf7f0;
  --cream-deep: #f6f0e5;
  --cream-warm: #f2ead9;
  --white: #fffdf9;

  --sprout: #65bc7b;          /* graphics + light fills only, never text */
  --sprout-wash: #f2f8f3;
  --sprout-line: #cfe6d5;

  --bridge: #2a7a4b;          /* AA action green */
  --bridge-dark: #1f5e39;
  --bridge-wash: #eaf4ed;

  --gold: #e9a83e;
  --gold-deep: #c9882a;
  --gold-wash: #fbf0da;

  --sky: #4a7ebb;
  --sky-wash: #eef4fa;

  --error: #b4432f;
  --error-wash: #fbeeea;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", "Be Vietnam", system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;

  --fs-hero: clamp(2.35rem, 1.55rem + 3.4vw, 4.15rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.7vw, 1.6rem);
  --fs-h4: clamp(1.08rem, 1rem + 0.3vw, 1.22rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.32vw, 1.25rem);
  --fs-body: 1.0625rem;       /* 17px mobile */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.75rem;

  --lh-tight: 1.08;
  --lh-head: 1.16;
  --lh-body: 1.68;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 104px;

  --section-y: clamp(56px, 7.5vw, 104px);
  --container: 1200px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --measure: 65ch;

  /* Shape */
  --r-sm: 4px;
  --r: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-arch: 240px;

  --shadow-xs: 0 1px 2px rgba(33, 41, 52, 0.06);
  --shadow-sm: 0 2px 8px rgba(33, 41, 52, 0.07), 0 1px 2px rgba(33, 41, 52, 0.05);
  --shadow-md: 0 10px 28px -12px rgba(33, 41, 52, 0.28), 0 2px 6px rgba(33, 41, 52, 0.06);
  --shadow-lg: 0 24px 60px -28px rgba(33, 41, 52, 0.42), 0 6px 16px rgba(33, 41, 52, 0.08);

  --header-h: 64px;
  --header-h-lg: 116px;
  --header-h-stuck: 64px;

  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.34, 1.32, 0.64, 1);

  --focus: 3px solid var(--gold);
  --focus-offset: 2px;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.125rem; /* 18px */
  }
}