/**
 * IA Webtech Design System — 01 TOKENS
 * Single source of truth. No hard-coded colors/spacing elsewhere.
 * Brand green sampled from the existing IA Webtech logo (avg ~#2E8B36).
 *
 * VERIFIED CONTRAST (WCAG, vs white, computed 2026-09-18):
 *  --brand-primary (#2e8b36)        4.32  -> accents, icons, LARGE text only (>=3:1)
 *  --brand-primary-600 (#256e2b)    6.28  -> primary buttons + links on white (AA pass)
 *  --brand-primary-700 (#1d5623)    8.72  -> hover states (AA pass)
 *  --text-primary (#0b0e0c)        19.40  -> body text (AAA)
 *  --text-muted (#5b6360)           6.18  -> secondary text (AA pass)
 * Rule: white body text sits ONLY on --brand-primary-600 or darker.
 */
:root{
  /* ---- Brand ---- */
  --brand-primary:#2e8b36;
  --brand-primary-600:#256e2b;
  --brand-primary-700:#1d5623;
  --brand-primary-hover:var(--brand-primary-600);
  --brand-primary-soft:#eaf4eb;
  --brand-primary-border:#cfe3d1;
  --brand-mist:#F1F6F1;
  --tint-tech:#E9F0E9;
  --card-bg:#ffffff;

  /* ---- Neutrals (tonal green system — no flat pure-white fields) ---- */
  --text-primary:#0b0e0c;
  --text-secondary:#232826;
  --text-muted:#5b6360;
  --text-faint:#8a938b;
  --surface:#FAFCFA;
  --surface-muted:#f6f8f6;
  --surface-sunken:#eef3ee;
  --surface-dark:#0b1510;
  --surface-dark-2:#0f1b14;
  --border:#e3e9e3;
  --border-strong:#cfd8cf;
  --dark-line:#223026;
  --dark-text:#e8efe9;
  --dark-muted:#a9b6ab;

  /* ---- Status (dark variants chosen for AA text on light surfaces) ---- */
  --success:#256e2b;
  --success-bg:#eaf4eb;
  --warning:#b45309;
  --warning-bg:#fdf3e7;
  --error:#b3261e;
  --error-bg:#fbeae9;

  /* ---- Typography ---- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --text-display:clamp(2.6rem,6vw,4.75rem);
  --text-h1:clamp(2.4rem,5.4vw,4.3rem);
  --text-h2:clamp(1.7rem,3.4vw,2.6rem);
  --text-h3:clamp(1.15rem,2vw,1.4rem);
  --text-body-lg:clamp(1.02rem,1.8vw,1.25rem);
  --text-body:1.0625rem;
  --text-small:.9rem;
  --text-caption:.78rem;
  --leading-tight:1.12;
  --leading-body:1.6;
  --weight-display:750;
  --weight-h:740;
  --weight-bold:700;

  /* ---- Spacing scale (4pt) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-24:96px;
  --section-y:clamp(56px,7vw,104px);
  --section-y-tight:clamp(40px,5vw,72px);

  /* ---- Grid ---- */
  --max-content:1200px;
  --max-wide:1320px;
  --gutter:24px;
  --grid-gap:18px;
  /* Breakpoints (documented; CSS vars cannot drive @media):
     sm 560px | form 640px | tablet 860-960px | nav 1080px | wide 1320px */

  /* ---- Shape / elevation ---- */
  --radius-sm:8px; --radius:14px; --radius-lg:18px; --radius-xl:22px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(11,14,12,.05),0 8px 28px -12px rgba(11,14,12,.14);
  --shadow-hover:0 2px 4px rgba(11,14,12,.06),0 16px 40px -16px rgba(11,14,12,.22);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.8,.28,1);
  --duration-fast:.18s; --duration-normal:.6s;

  /* ---- Legacy aliases (templates reference these; do not fork values) ---- */
  --ia-green:var(--brand-primary);
  --ia-green-600:var(--brand-primary-600);
  --ia-green-700:var(--brand-primary-700);
  --ia-green-tint:var(--brand-primary-soft);
  --ia-green-line:var(--brand-primary-border);
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --muted:var(--text-muted);
  --faint:var(--text-faint);
  --bg:var(--surface);
  --panel:var(--surface-sunken);
  --line:var(--border);
  --line-strong:var(--border-strong);
  --dark:var(--surface-dark);
  --dark-2:var(--surface-dark-2);
  --font:var(--font-sans);
  --max:var(--max-content);
}