/* ============================================================
   Evergreen Veterans — Design Tokens
   Canonical CSS custom properties. Consume directly in Code.
   ============================================================ */

:root {
  /* ---- Color: brand ---- */
  --ev-pine:        #1C3D32; /* Primary anchor — dark sections, headers */
  --ev-evergreen:   #2D6A4F; /* Primary CTA, links, active states */
  --ev-navy:        #1B2A4A; /* Secondary — Americana w/o the flag; alt sections */
  --ev-red:         #9B2D20; /* Sparing — urgent CTA, crisis line, honor */
  --ev-brass:       #C9A227; /* Very sparing — stars, medals, dividers */

  /* ---- Color: neutrals (warm, never pure white) ---- */
  --ev-linen:       #F7F4EC; /* Page background */
  --ev-warm-white:  #FCFBF7; /* Cards / surfaces */
  --ev-bark:        #22302B; /* Body ink on light */
  --ev-sage:        #5C6B63; /* Secondary text */

  /* ---- Derived tints / shades ---- */
  --ev-pine-700:    #142C24;
  --ev-evergreen-600:#256048;
  --ev-evergreen-tint:#E4EDE7; /* soft green surface */
  --ev-navy-tint:   #E5E8EF;
  --ev-brass-tint:  #F3E9C9;
  --ev-red-tint:    #F2E1DD;
  --ev-line:        #E3DECF; /* hairline on linen */
  --ev-line-strong: #CFC8B4;

  /* ---- Functional ---- */
  --ev-success:     #2D6A4F;
  --ev-warning:     #B4791E;
  --ev-error:       #9B2D20;
  --ev-info:        #1B2A4A;

  /* ---- Typography ---- */
  --ev-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ev-font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ev-text-xs:   0.78rem;  /* 14px */
  --ev-text-sm:   0.889rem; /* 16px */
  --ev-text-base: 1rem;     /* 18px (html base = 18px) */
  --ev-text-lg:   1.222rem; /* 22px */
  --ev-text-xl:   1.444rem; /* 26px */
  --ev-text-2xl:  1.778rem; /* 32px */
  --ev-text-3xl:  2.333rem; /* 42px */
  --ev-text-4xl:  3.111rem; /* 56px */
  --ev-text-5xl:  4rem;     /* 72px */

  --ev-leading-tight: 1.15;
  --ev-leading-snug:  1.3;
  --ev-leading-body:  1.6;

  /* ---- Radius ---- */
  --ev-radius-sm: 8px;
  --ev-radius:    12px;
  --ev-radius-lg: 16px;
  --ev-radius-xl: 24px;
  --ev-radius-pill: 999px;

  /* ---- Shadow (gentle) ---- */
  --ev-shadow-sm: 0 1px 2px rgba(28,61,50,.06), 0 1px 3px rgba(28,61,50,.08);
  --ev-shadow:    0 4px 12px rgba(28,61,50,.08), 0 2px 4px rgba(28,61,50,.05);
  --ev-shadow-lg: 0 18px 48px rgba(20,44,36,.16), 0 6px 14px rgba(20,44,36,.08);

  /* ---- Spacing scale (8pt) ---- */
  --ev-space-1: 4px;
  --ev-space-2: 8px;
  --ev-space-3: 12px;
  --ev-space-4: 16px;
  --ev-space-5: 24px;
  --ev-space-6: 32px;
  --ev-space-7: 48px;
  --ev-space-8: 64px;
  --ev-space-9: 96px;
  --ev-space-10: 128px;

  /* ---- Layout ---- */
  --ev-maxw: 1200px;
  --ev-maxw-prose: 70ch;

  /* ---- Motion ---- */
  --ev-ease: cubic-bezier(.2,.6,.2,1);
  --ev-dur: .28s;
}