/* ==========================================================================
   TOKENS — global design system variables
   Every colour, radius, shadow and font stack used anywhere in the ERP is
   declared here. Change a value once and it applies across every module.
   ========================================================================== */

:root{
  /* Brand greens */
  --green-900:#0b1f14;
  --green-800:#12351f;
  --green-700:#15522c;
  --green-600:#1a6b38;
  --green-500:#189048;
  --green-400:#22b45c;
  --green-050:#e9f6ee;

  /* Sidebar */
  --sidebar-bg:#101c15;
  --sidebar-bg-2:#0c1710;
  --sidebar-text:#c9d6cd;
  --sidebar-text-dim:#8a9a90;
  --sidebar-hover:#18291f;
  --sidebar-width:230px;
  /* Width of the collapsed sidebar. Wide enough to centre a 20px nav icon
     inside its 11px padding and still clear the 43px brand badge. */
  --sidebar-rail:72px;

  /* Neutrals */
  --ink:#111827;
  --ink-2:#334155;
  --muted:#6b7280;
  --muted-2:#9aa3af;
  --border:#e6e9ee;
  --border-strong:#d7dce4;
  --surface:#ffffff;
  --canvas:#f4f6f8;

  /* Status */
  --success:#16a34a;
  --success-bg:#eaf7ef;
  --warning:#f59e0b;
  --warning-bg:#fdf6e7;
  --danger:#e0453b;
  --danger-bg:#fdeeed;
  --info:#2563eb;
  --info-bg:#eaf1fd;
  --blue:#1e75d6;
  --purple:#7c4dcc;
  --purple-bg:#f3eefc;
  --orange:#f2820c;

  /* Shape */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 2px 10px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(16,24,40,.14);
  --header-h:70px;

  --font-bn:'Hind Siliguri','Noto Sans Bengali','Nirmala UI','SolaimanLipi',sans-serif;
  --font-en:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  /* Emoji icon glyphs (activity rows, notification rows, dashboard stat
     cards). Those spans hold ONLY an emoji, so they are pinned to a colour
     emoji stack instead of inheriting --font-bn / --font-en. Two reasons:
       1. The inherited stack leads with 'Hind Siliguri', a Google webfont
          loaded with display=swap. Until it arrives the strut metrics come
          from whatever fallback is available, and the emoji's line box and
          baseline shift the moment the webfont swaps in - the icon appears
          to resize on re-render.
       2. Text fonts such as Nirmala UI and Segoe UI carry monochrome
          glyphs for U+2600 (sun) and U+26A0 (warning). When one of those
          wins the cascade the icon renders as a flat text symbol instead
          of the colour emoji.
     Naming the emoji fonts first makes the glyph AND the strut
     deterministic in both languages, on every platform, whenever the
     webfont lands. */
  --font-emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Android Emoji','EmojiOne Color','Twemoji Mozilla','Segoe UI Symbol',sans-serif;
}
