/* ============================================================
   BMS GLOBAL — Design System & CSS Custom Properties (Variables)
   ============================================================ */

:root {
  /* ── Typography (Plus Jakarta Sans & Outfit) ────────────── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Font Sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── Brand Color Palette ────────────────────────────────── */
  /* Primary Navy */
  --navy-deep:   #040d27;
  --navy:        #071a46;
  --navy-2:      #0b245c;
  --navy-light:  #102e70;

  /* Accent Blue */
  --blue:        #1d63e9;
  --blue-hover:  #1552ca;
  --blue-light:  #4179e8;
  --blue-soft:   #eef4ff;
  --blue-muted:  #d2e1fd;

  /* Brand Gold / Yellow */
  --gold-vivid:  #f6cb63;
  --gold:        #d8a116;
  --gold-bright: #e0aa1b;
  --gold-soft:   #fef9eb;
  --gold-muted:  #f8e5b4;

  /* Accent Purple (REC Theme) */
  --purple:      #4a39b3;
  --purple-soft: #f1efff;

  /* Semantic State Colors */
  --green:       #0d9f6e;
  --green-soft:  #e6f7f0;
  --red:         #e02424;
  --red-soft:    #fde8e8;

  /* Neutrals & Surfaces */
  --bg:          #f6f8fc;
  --bg-2:        #edf1f7;
  --surface:     #ffffff;
  --surface-alt: #f8fafc;

  /* Ink / Text Colors */
  --ink:         #0a162e;
  --ink-2:       #2b3a55;
  --muted:       #64748b;
  --muted-light: #94a3b8;

  /* Borders & Lines */
  --line:        rgba(15, 37, 79, 0.09);
  --line-soft:   rgba(15, 37, 79, 0.05);

  /* ── Layout Dimensions ──────────────────────────────────── */
  --page-max:    1280px;
  --navbar-h:    72px;
  --sidebar-w:   260px;
  --admin-sidebar-w: 270px;

  /* ── Spacing System ─────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Border Radii ───────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── Shadows & Elevation ────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(10, 26, 68, 0.04);
  --shadow-sm:    0 4px 12px rgba(10, 26, 68, 0.06);
  --shadow-md:    0 8px 24px rgba(10, 26, 68, 0.09);
  --shadow-lg:    0 16px 40px rgba(10, 26, 68, 0.12);
  --shadow-xl:    0 24px 60px rgba(7, 26, 70, 0.18);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* ── Transitions & Easings ──────────────────────────────── */
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.4s;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index Layers ─────────────────────────────────────── */
  --z-sticky:  100;
  --z-overlay: 300;
  --z-drawer:  340;
  --z-navbar:  350;
  --z-modal-bg: 400;
  --z-modal:   450;
  --z-toast:   500;
}