/* =====================================================================
   Design tokens — "Meridian"  ·  Makhzan / Al-Dhahabia · Aten Studio
   Bold 2026 clinical-agri system: deep pine + electric mint on cool paper,
   vivid triage status colours, huge display type, structural cards.
   Variable NAMES are preserved from the previous system so every existing
   component re-skins automatically; only the VALUES + a few new tokens change.
   ===================================================================== */
:root {
  /* ---- Brand: deep pine → electric mint (primary action + identity) ---- */
  --green:      #0b6e4f;   /* primary — buttons, links, brand */
  --green-700:  #085a40;   /* darker */
  --green-800:  #063a2a;   /* darkest — deep panels */
  --green-600:  #0e8a63;   /* hover / lighter action */
  --green-soft: #d3f0e2;   /* icon chip / soft fill */
  --green-tint: #e8f6ef;   /* very light section bg / table head */

  /* Electric mint — the "bold" signal. Active states, focus glow, accents. */
  --mint:       #12c48a;
  --mint-bright:#1ee69f;
  --mint-glow:  rgba(18, 196, 138, 0.34);

  /* Ink canvas for the sidebar/login — near-black cool green. */
  --ink-900:    #071b14;
  --ink-850:    #0a251b;
  --ink-800:    #0d3125;

  /* ---- Amber (heritage warmth, now sharper) — supply category + accent ---- */
  --gold:       #d99a0b;
  --gold-600:   #b57d06;
  --gold-soft:  #fbeac2;
  --gold-tint:  #fdf5e0;

  /* ---- Cool paper canvas (replaces warm cream — the character break) ---- */
  --cream:      #f2f6f4;   /* app background (cool off-white) */
  --cream-2:    #e6ede9;   /* subtle raised neutral / segment track */
  --ink:        #0c1512;   /* body text — near-black, high contrast */
  --ink-soft:   #3c4a44;   /* secondary text */
  --ink-faint:  #6d7a74;   /* tertiary / meta */

  --white:      #ffffff;
  --line:       #dbe5e0;   /* structural border (cool) */
  --line-soft:  #e6ede9;   /* hairline */

  /* ---- Status — vivid triage (the functional heart of an inventory) ---- */
  --ok:    #0e9f6e;  --ok-bg:   #d9f2e6;
  --warn:  #e08606;  --warn-bg: #fce9d1;
  --late:  #dc2a25;  --late-bg: #fbe1df;
  --tg:    #229ed9;  --tg-bg:   #ddf0fb;  --tg-600: #1b87bb;

  /* ---- Typography ---- */
  --font: "Tajawal", system-ui, "Segoe UI", sans-serif;
  --fs-xs:  0.75rem;
  --fs-sm:  0.85rem;
  --fs-md:  0.95rem;
  --fs-lg:  1.1rem;
  --fs-xl:  clamp(1.3rem, 3vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 4vw, 2rem);
  --fs-3xl: clamp(1.95rem, 5vw, 2.5rem);
  --fs-4xl: clamp(2.6rem, 7vw, 4rem);   /* hero KPI / display numbers */

  /* Display treatment for big numbers (tight, heavy, latin-tabular). */
  --display-weight: 900;
  --display-tracking: -0.02em;

  /* ---- Radius (structural, slightly larger) ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows — restrained; elevation is earned, not default ---- */
  --sh-sm: 0 1px 2px rgba(7, 27, 20, 0.05), 0 1px 3px rgba(7, 27, 20, 0.04);
  --sh-md: 0 6px 18px rgba(7, 27, 20, 0.08), 0 2px 6px rgba(7, 27, 20, 0.05);
  --sh-lg: 0 18px 44px rgba(7, 27, 20, 0.16), 0 6px 16px rgba(7, 27, 20, 0.08);
  --sh-green: 0 10px 26px rgba(11, 110, 79, 0.30);
  --sh-mint:  0 8px 22px var(--mint-glow);
  --sh-hero:  0 22px 50px rgba(6, 58, 42, 0.24), 0 8px 20px rgba(6, 58, 42, 0.12);

  /* ---- Spacing scale (new — for the bold components) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;

  /* ---- Layout ---- */
  --sidebar-w: 272px;
  --topbar-h: 70px;
  --maxw: 1320px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms var(--ease);
  --t-mid: 200ms var(--ease);
}