/* ═══════════════════════════════════════════════════════════════
   Manzoma Design Tokens
   Phase 2 split: loaded before style.css to preserve the existing UI.
   Keep variable names stable because runtime CSS and JS-facing classes depend on them.
═══════════════════════════════════════════════════════════════ */

:root{
  /* ═══════════════════════════════════════════════════════════
     MANZOMA DESIGN SYSTEM v2 — recalibrated tokens
     Same variable names (no JS / class breakage) · refined values
  ═══════════════════════════════════════════════════════════ */

  /* ── Brand Palette (refined emerald — deeper, richer) ── */
  --g1:#0C261A;   /* darkest — sidebar bg (deeper for contrast) */
  --g2:#143726;   /* dark — nav active bg */
  --g3:#1B6443;   /* mid — primary buttons (more saturated) */
  --g4:#2E8A60;   /* light-mid — hover */
  --g5:#E7F4ED;   /* tint bg */
  --g6:#F2FAF6;   /* very light tint */
  --accent:#10B981; /* vivid accent (modern emerald) */
  --accent-soft:rgba(16,185,129,.12);

  /* ── Surfaces (clearer elevation steps) ── */
  --bg:#EEF2F0;   /* app canvas — slightly cooler */
  --s0:#FFFFFF;   /* raised cards */
  --s1:#F6F9F7;   /* subtle fill */
  --s2:#EDF2EF;   /* inset / hover */
  --s3:#DDE7E2;   /* dividers, tracks */
  --s4:#C2D4CC;   /* strong fill */

  /* ── Borders (slightly stronger for definition) ── */
  --b0:rgba(12,38,26,.07);
  --b1:rgba(12,38,26,.12);
  --b2:rgba(12,38,26,.22);

  /* ── Semantic (WCAG-AA tuned on white) ── */
  --red:#C32B27;    --red-bg:#FDEEEC;
  --amber:#A85A04;  --amber-bg:#FCF3E3;
  --blue:#0A66A6;   --blue-bg:#E8F2FB;
  --purple:#5E32B0; --purple-bg:#F1ECFD;
  --green:#107A3E;  --green-bg:#E8F8EF;

  /* ── Text (stronger contrast hierarchy) ── */
  --t1:#0A1912;   /* headings */
  --t2:#21382B;   /* body */
  --t3:#4F6E62;   /* secondary */
  --t4:#7C9C8C;   /* muted / captions */

  /* ── Radius (consistent ramp) ── */
  --r:14px;   /* cards, containers */
  --r2:10px;  /* inner elements */
  --r3:8px;   /* buttons, chips */
  --r4:5px;   /* badges, small */

  /* ── Shadows (layered, softer ambient + key) ── */
  --sh1:0 1px 2px rgba(10,25,18,.04),0 2px 6px rgba(10,25,18,.05);
  --sh2:0 2px 6px rgba(10,25,18,.06),0 8px 24px rgba(10,25,18,.08);
  --sh3:0 4px 12px rgba(10,25,18,.08),0 18px 48px rgba(10,25,18,.14);

  /* ── Motion ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,.68,0,1.2);

  /* ── Spacing — 4pt grid (extended) ── */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px;

  /* ── Font ── */
  --ff:'IBM Plex Sans Arabic',system-ui,sans-serif;
  /* Type scale — Major Third (1.25), base 16px → larger, readable */
  --fz-xs:11px; --fz-sm:13px; --fz-base:14px;
  --fz-md:16px; --fz-lg:20px; --fz-xl:25px; --fz-2xl:31px;
}