/* AMA-TMS v2 — Design Tokens
   DEFAULT THEME: Bibit — clean fintech light
   Inspired by Bibit Investasi (white canvas, signature green, high trust)
   ─────────────────────────────────────────────────────────────────────── */
:root {

  /* ══ Brand / Accent Colors ══════════════════════════════ */
  --clr-primary:       #00AA5B;
  --clr-primary-dark:  #008C49;
  --clr-primary-light: #33BB7A;
  --clr-accent:        #0099E6;
  --clr-success:       #00AA5B;
  --clr-warning:       #F59E0B;
  --clr-danger:        #EF4444;
  --clr-info:          #3B82F6;

  /* ══ Background Layers ══════════════════════════════════ */
  --bg-base:     #F0F4F8;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #F8FAFC;
  --bg-overlay:  #EFF3F8;
  --bg-input:    #FFFFFF;

  /* Aliases for JS inline styles */
  --bg-card:       #FFFFFF;
  --border-color:  #E2E8F0;

  /* ══ Text ═══════════════════════════════════════════════ */
  --txt-primary:   #111827;
  --txt-secondary: #6B7280;
  --txt-muted:     #9CA3AF;
  --txt-inverse:   #FFFFFF;

  /* ══ Borders ════════════════════════════════════════════ */
  --border-subtle:  #F1F5F9;
  --border-normal:  #E2E8F0;
  --border-strong:  #CBD5E1;
  --border-primary: rgba(0,170,91,0.25);

  /* ══ Semantic / Component Tokens ════════════════════════ */
  --nav-active-bg:    rgba(0,170,91,0.08);
  --badge-primary-bg: rgba(0,170,91,0.10);
  --badge-success-bg: rgba(0,170,91,0.10);
  --badge-warning-bg: rgba(245,158,11,0.10);
  --badge-danger-bg:  rgba(239,68,68,0.10);
  --badge-urgent-bg:  rgba(251,133,0,0.10);
  --form-focus-shadow: 0 0 0 3px rgba(0,170,91,0.12);
  --modal-backdrop:    rgba(17,24,39,0.45);
  --loading-backdrop:  rgba(240,244,248,0.90);

  /* ══ Shadows ═════════════════════════════════════════════ */
  --shadow-sm:   0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
  --shadow-md:   0 4px 12px rgba(17,24,39,0.08), 0 2px 4px rgba(17,24,39,0.04);
  --shadow-lg:   0 16px 40px rgba(17,24,39,0.10), 0 4px 10px rgba(17,24,39,0.06);
  --shadow-glow: 0 0 0 3px rgba(0,170,91,0.15);

  /* ══ Dimensions ═════════════════════════════════════════ */
  --sidebar-width:     250px;
  --sidebar-collapsed:  64px;
  --header-height:      52px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* ══ Typography ═════════════════════════════════════════ */
  --font-sans: Consolas, 'Courier New', monospace;
  --font-mono: Consolas, 'Courier New', monospace;
  --font-size-xs:   0.75rem;
  --font-size-sm:   1.0000rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;

  /* ══ Transitions ════════════════════════════════════════ */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ══ Z-Index ════════════════════════════════════════════ */
  --z-sidebar: 100;
  --z-header:  110;
  --z-modal:   200;
  --z-toast:   300;
  --z-loading: 400;
}