/* ==========================================================================
   ACHI613 Design Tokens
   Generated from Figma "ACHI Tokens" collection — file Kq5eS7LONzTzUYnIuSUR2N.
   Do not hand-edit values. Change them in Figma, re-export, regenerate.

   These are the single source of truth for the ACHI design system. Elementor
   Global Colors are mapped ONTO these values (see design/tokens.json →
   elementorGlobals) so an editor changing a global in Site Settings and a
   developer reading CSS are looking at the same colour.
   ========================================================================== */

:root {
  /* --- brand: Israel blue --- */
  --achi-brand-900: #08265F;   /* deep navy — footer, dark sections */
  --achi-brand-700: #0B3FA8;   /* primary buttons, links, active nav */
  --achi-brand-500: #0038B8;   /* Israel blue — icons, accents */
  --achi-brand-100: #DCE7FF;   /* tinted surfaces, body text on navy */
  --achi-brand-50:  #F0F5FF;   /* section background */

  /* --- accent: donate / urgency. Use sparingly. --- */
  --achi-accent-600: #C0272D;  /* donate CTA, eyebrows, rules */
  --achi-accent-700: #9D1F24;  /* donate hover */
  --achi-accent-500: #DC3B33;  /* highlight */
  --achi-accent-50:  #FDECEA;  /* alert tint */

  /* --- neutral: secondary surfaces + marks (replaced the retired gold) --- */
  --achi-neutral-600: #67718A; /* neutral hover */
  --achi-neutral-500: #7C8699; /* chips, marks, neutral button (light bg only) */
  --achi-neutral-200: #C3CBD9; /* accents ON DARK — footer headings, band eyebrow */
  --achi-neutral-50:  #ECEFF4; /* secondary section surface */

  /* --- ink --- */
  --achi-ink-900: #12172A;     /* headings */
  --achi-ink-700: #3A4257;     /* body */
  --achi-ink-500: #6B7488;     /* muted */

  /* --- lines + surfaces --- */
  --achi-line-200:  #E2E7F0;
  --achi-surface-50: #F7F9FC;
  --achi-surface-0:  #FFFFFF;
  --achi-success-600: #1F7A54;

  /* --- spacing scale --- */
  --achi-space-4: 4px;    --achi-space-8: 8px;    --achi-space-12: 12px;
  --achi-space-16: 16px;  --achi-space-20: 20px;  --achi-space-24: 24px;
  --achi-space-32: 32px;  --achi-space-40: 40px;  --achi-space-48: 48px;
  --achi-space-64: 64px;  --achi-space-80: 80px;  --achi-space-96: 96px;
  --achi-space-120: 120px;

  /* --- radius --- */
  --achi-radius-sm: 6px;
  --achi-radius-md: 10px;
  --achi-radius-lg: 16px;
  --achi-radius-pill: 999px;

  /* --- elevation --- */
  --achi-shadow-card: 0 1px 2px rgba(18,23,42,.06), 0 8px 24px rgba(18,23,42,.06);
  --achi-shadow-lift: 0 16px 40px rgba(18,23,42,.12);

  /* --- type --- */
  --achi-font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --achi-font-ui: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- layout --- */
  --achi-container: 1200px;
  --achi-gutter: clamp(20px, 6vw, 120px);
  --achi-section-y: clamp(48px, 6vw, 96px);
}

/* --------------------------------------------------------------------------
   Type ramp as utility classes. Widgets apply these rather than declaring
   font sizes inline, so a ramp change propagates everywhere.
   Sizes use clamp() so the ramp is fluid — the Figma value is the desktop cap.
   -------------------------------------------------------------------------- */
.achi-display-xl { font: 600 clamp(34px, 4.4vw, 64px)/1.06 var(--achi-font-display); letter-spacing: -.005em; color: var(--achi-ink-900); }
.achi-display-lg { font: 600 clamp(30px, 3.6vw, 48px)/1.12 var(--achi-font-display); letter-spacing: -.005em; color: var(--achi-ink-900); }
.achi-heading-xl { font: 600 clamp(28px, 3.2vw, 40px)/1.15 var(--achi-font-display); color: var(--achi-ink-900); }
.achi-heading-lg { font: 600 clamp(24px, 2.6vw, 32px)/1.25 var(--achi-font-display); color: var(--achi-ink-900); }
.achi-heading-md { font: 600 clamp(21px, 2vw, 24px)/1.33 var(--achi-font-display); color: var(--achi-ink-900); }
.achi-heading-sm { font: 700 20px/1.4 var(--achi-font-ui); color: var(--achi-ink-900); }
.achi-eyebrow    { font: 700 13px/1.23 var(--achi-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--achi-accent-600); }
.achi-body-lg    { font: 400 clamp(17px, 1.35vw, 18px)/1.66 var(--achi-font-ui); color: var(--achi-ink-700); }
.achi-body-md    { font: 400 16px/1.62 var(--achi-font-ui); color: var(--achi-ink-700); }
.achi-body-md-bold { font: 600 16px/1.62 var(--achi-font-ui); color: var(--achi-ink-900); }
.achi-body-sm    { font: 400 14px/1.57 var(--achi-font-ui); color: var(--achi-ink-700); }
.achi-body-sm-bold { font: 600 14px/1.57 var(--achi-font-ui); color: var(--achi-ink-900); }
.achi-caption    { font: 400 12px/1.5 var(--achi-font-ui); color: var(--achi-ink-500); }
.achi-nav        { font: 600 14px/1.43 var(--achi-font-ui); letter-spacing: .05em; text-transform: uppercase; }

/* Eyebrow on a dark surface must use neutral-200, never neutral-500 —
   neutral-500 on brand-900 is 3.9:1 and fails WCAG AA at 13px. */
.achi-on-dark .achi-eyebrow { color: var(--achi-neutral-200); }
.achi-on-dark { color: var(--achi-brand-100); }
.achi-on-dark h1, .achi-on-dark h2, .achi-on-dark h3 { color: var(--achi-surface-0); }