/* ============================================================
   DESIGN TOKENS — NOC Ameera
   ============================================================ */

:root {
  /* ── Brand: Hijau Botol (sidebar hover/active only) ── */
  --brand-50:  #edf7f1;
  --brand-100: #d0eddf;
  --brand-200: #a3dbbf;
  --brand-300: #74c69d;
  --brand-400: #52b788;
  --brand-500: #40916c;
  --brand-600: #2d6a4f;
  --brand-700: #1b4332;
  --brand-800: #143628;
  --brand-900: #0d2a1f;

  /* ── Neutrals (cool gray) ── */
  --n-0:   #ffffff;
  --n-50:  #F8F8FF;
  --n-100: #F1F1F6;
  --n-200: #E4E4EB;
  --n-300: #D1D1DB;
  --n-400: #A0A0B0;
  --n-500: #70707A;
  --n-600: #52525E;
  --n-700: #3A3A44;
  --n-800: #26262E;
  --n-900: #18181B;
  --n-950: #09090B;

  /* ── Semantic: Light Mode ── */
  --bg-page:        #F8F8FF;
  --bg-surface:     #ffffff;
  --bg-elevated:    #ffffff;
  --bg-muted:       #F1F1F6;
  --bg-muted-hover: #E8E8F0;
  --bg-sidebar:     #ffffff;
  --bg-sidebar-item-hover:  var(--brand-50);
  --bg-sidebar-item-active: var(--brand-50);

  --txt-base:       #18181B;
  --txt-muted:      #70707A;
  --txt-faint:      #A0A0B0;
  --txt-inverse:    #ffffff;
  --txt-sidebar:    #52525E;
  --txt-sidebar-active: var(--brand-700);

  --sidebar-brand-text:    #18181B;
  --sidebar-brand-sub-txt: #A0A0B0;
  --sidebar-border:        #E4E4EB;

  --border:         #E4E4EB;
  --border-strong:  #D1D1DB;

  /* ── Primary Accent (buttons, focus, pagination) ── */
  --accent:         #2d6a4f;
  --accent-hover:   #1b4332;
  --accent-soft:    var(--brand-50);
  --accent-txt:     #2d6a4f;

  /* ── Sidebar accent: hijau botol ── */
  --nav-active-border: var(--brand-600);

  /* ── Status Pills ── */
  --pill-aktif-bg:     #d1fae5;
  --pill-aktif-txt:    #065f46;
  --pill-isolir-bg:    #fef3c7;
  --pill-isolir-txt:   #92400e;
  --pill-suspend-bg:   #fee2e2;
  --pill-suspend-txt:  #991b1b;
  --pill-nonaktif-bg:  #F1F1F6;
  --pill-nonaktif-txt: #52525E;
  --pill-paid-bg:      #d1fae5;
  --pill-paid-txt:     #065f46;
  --pill-unpaid-bg:    #fef3c7;
  --pill-unpaid-txt:   #92400e;
  --pill-overdue-bg:   #fee2e2;
  --pill-overdue-txt:  #991b1b;
  --pill-pending-bg:   #F1F1F6;
  --pill-pending-txt:  #52525E;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-sidebar: 1px 0 0 #E4E4EB;

  /* ── Layout ── */
  --sidebar-w:    260px;
  --topbar-h:     60px;
  --content-pad:  1.5rem;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Motion ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   150ms var(--ease-out-expo);
  --t-base:   250ms var(--ease-out-expo);
  --t-slow:   400ms var(--ease-out-expo);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg-page:        #121212;
  --bg-surface:     #1A1A1A;
  --bg-elevated:    #222222;
  --bg-muted:       #1E1E1E;
  --bg-muted-hover: #25252C;
  --bg-sidebar:     #161616;
  --bg-sidebar-item-hover:  rgba(45,106,79,0.15);
  --bg-sidebar-item-active: rgba(45,106,79,0.18);

  --txt-base:       #FAFAFA;
  --txt-muted:      #8A8A9A;
  --txt-faint:      #5A5A6A;
  --txt-sidebar:    rgba(250,250,250,0.55);
  --txt-sidebar-active: #a3dbbf;

  --sidebar-brand-text:    #FAFAFA;
  --sidebar-brand-sub-txt: rgba(250,250,250,0.35);
  --sidebar-border:        #2A2A2A;

  --border:         #2A2A2A;
  --border-strong:  #333333;

  --accent:         var(--brand-500);
  --accent-hover:   var(--brand-400);
  --accent-soft:    rgba(64,145,108,0.12);
  --accent-txt:     var(--brand-300);

  --nav-active-border: var(--brand-400);

  --pill-aktif-bg:     rgba(16,185,129,0.14);
  --pill-aktif-txt:    #6ee7b7;
  --pill-isolir-bg:    rgba(245,158,11,0.14);
  --pill-isolir-txt:   #fcd34d;
  --pill-suspend-bg:   rgba(239,68,68,0.14);
  --pill-suspend-txt:  #fca5a5;
  --pill-nonaktif-bg:  rgba(90,90,106,0.18);
  --pill-nonaktif-txt: #8A8A9A;
  --pill-paid-bg:      rgba(16,185,129,0.14);
  --pill-paid-txt:     #6ee7b7;
  --pill-unpaid-bg:    rgba(245,158,11,0.14);
  --pill-unpaid-txt:   #fcd34d;
  --pill-overdue-bg:   rgba(239,68,68,0.14);
  --pill-overdue-txt:  #fca5a5;
  --pill-pending-bg:   rgba(90,90,106,0.18);
  --pill-pending-txt:  #8A8A9A;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.28);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.22);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.30);
  --shadow-sidebar: 2px 0 20px rgba(0,0,0,0.40);
}