/* ============================================================================
 * Varthagam ERP — Phase-2 revamp · Direction B (Crisp SaaS)
 * tokens.css — single source of truth. Loaded LAST so it refines the legacy
 * inline :root. Brand green (#3C7538) preserved per UI conventions.
 * ========================================================================== */
:root{
  /* brand (unchanged green identity) */
  --brand:#3C7538; --brand-600:#356A32; --brand-700:#2D5A2A; --brand-300:#7FB07A;
  --brand-bg:#EAF1E8; --brand-ring:rgba(60,117,56,.22);
  /* warm neutrals (already close in legacy — formalised here) */
  --bg:#F6F6F3; --surface:#FFFFFF; --surface-2:#FBFBF9; --surface-3:#F1F1ED;
  --border:#E6E6E0; --border-strong:#D6D6CE;
  --text:#1B1B19; --text-2:#54544E; --text-3:#6C6C64;  /* was #86867E = 3.67:1 on white — fails WCAG AA for the small labels it styles; #73736B ≈ 4.8:1 */
  /* Muted text that lands on a TINT rather than white. The lanes on every
     Kanban board wash their body in rgba(colour,.09) and their header in
     rgba(colour,.26), which costs roughly a point of contrast — --text-3 is
     4.8:1 on white but only ~4.2:1 there. Use this instead on any tinted
     ground. (4 Aug 2026: measured on the rendered lanes, not derived.) */
  --text-3-tint:#5F5F58;
  /* Aliases. index.html's pre-paint :root block uses a second set of names for
     the same scale; both resolve here so a value can only be changed once.
     ⚠ These MUST equal what the inline block already sets, or adding them here
     silently restyles the app — tokens.css loads last and wins, and
     --text-muted alone is used 273 times in index.html. It was briefly set to
     --text-2 (#54544E) on 4 Aug 2026 and darkened every muted label in the ERP;
     caught before anyone saw it, but that is the failure mode to respect. */
  --text-muted:#6B6A65;   /* --text-faint is already aliased below; don't add it twice */
  /* status */
  --ok:#3C7538; --ok-bg:#EAF1E8; --warn:#B5781A; --warn-bg:#F6ECD9;
  --danger:#C0443D; --danger-bg:#F7E5E3; --info:#3A6FA0; --info-bg:#E5EEF6;
  /* type */
  --font:'Geist','Geist Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* spacing */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* radius — sharper, crisp-SaaS */
  --r-sm:6px;--r-md:9px;--r-lg:12px;--r-xl:16px;
  /* ── control sizing — canonical scale (single source of truth) ────────────
     Audit found 20+ ad-hoc square sizes (icons smeared 12–20px). Snap to these.
     Icon glyph sizes (the SVG/font box, not the button): */
  --ico-2xs:12px; --ico-xs:14px; --ico-sm:16px; --ico-md:18px; --ico-lg:20px; --ico-xl:24px; --ico-2xl:28px;
  /* Square icon-button HIT areas (≥36 desktop, 44 = a11y touch min on mobile): */
  --iconbtn-sm:30px; --iconbtn:36px; --iconbtn-lg:44px; --tap:44px;
  /* Pill/standard control (button, input, tab) heights: */
  --ctl-h-sm:30px; --ctl-h:36px; --ctl-h-lg:44px;
  /* Floating action button: */
  --fab:56px; --fab-ico:24px;
  /* Avatars: */
  --av-sm:28px; --av:36px; --av-lg:44px;
  /* shadow — subtle */
  --sh-sm:0 1px 2px rgba(27,27,25,.06),0 1px 1px rgba(27,27,25,.04);
  --sh-md:0 2px 4px rgba(27,27,25,.06),0 4px 12px rgba(27,27,25,.05);
  --sh-lg:0 8px 28px rgba(27,27,25,.12);
  /* motion (emil) */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1); /* iOS-like slide curve — used by Headroom topbar reveal */
  /* legacy aliases some inline rules read — keep them pointing at the new scale */
  --surface-alt:var(--surface-2); --text-soft:var(--text-3); --text-faint:var(--text-3);
  /* Direction B is all-sans (approved). The legacy editorial serif (Instrument
     Serif) drove every section/modal title via --font-serif; point it at Geist so
     all headings are consistent. Revert this ONE line to restore serif accents. */
  --font-sans:var(--font); --font-serif:var(--font);
}