/* ==========================================================================
   variables.css — Design Tokens Kencana Apps
   CSS Custom Properties: warna, spacing, radius, shadow, typography, dll.
   ========================================================================== */

:root {
  /* ---------- Brand Colors ---------- */
  --color-green-deep:   #1a3c2e;
  --color-green-main:   #2d6a4f;
  --color-green-mid:    #40916c;
  --color-green-light:  #d8f3dc;
  --color-green-pale:   #f0f9f4;
  --color-gold-main:    #c9a227;
  --color-gold-dark:    #a07d10;
  --color-gold-light:   #fdf3d0;

  /* Topbar (charcoal gelap — sengaja beda dari green-deep) */
  --color-topbar:       #16181c;
  --color-topbar-border:#24262b;

  /* ---------- Neutral ---------- */
  --color-bg:             #eef0ec;
  --color-surface:        #ffffff;
  --color-surface-2:      #f8faf7;
  --color-border:         #e2e6df;
  --color-border-dark:    #c8cec4;
  --color-text:           #1a1a1a;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;

  /* ---------- Status ---------- */
  --color-success:      #16a34a;
  --color-success-bg:   #dcfce7;
  --color-danger:       #dc2626;
  --color-danger-bg:    #fee2e2;
  --color-warning:      #d97706;
  --color-warning-bg:   #fef3c7;
  --color-info:         #2563eb;
  --color-info-bg:      #dbeafe;

  /* ---------- App Card Colors ---------- */
  --app-green-bar:      #2d6a4f;
  --app-green-icon-bg:  #d8f3dc;
  --app-green-icon-fg:  #1a3c2e;
  --app-gold-bar:       #c9a227;
  --app-gold-icon-bg:   #fdf3d0;
  --app-gold-icon-fg:   #7c5e08;
  --app-blue-bar:       #2563eb;
  --app-blue-icon-bg:   #dbeafe;
  --app-blue-icon-fg:   #1e40af;
  --app-teal-bar:       #0d9488;
  --app-teal-icon-bg:   #ccfbf1;
  --app-teal-icon-fg:   #0f766e;
  --app-red-bar:        #dc2626;
  --app-red-icon-bg:    #fee2e2;
  --app-red-icon-fg:    #991b1b;
  --app-purple-bar:     #7c3aed;
  --app-purple-icon-bg: #ede9fe;
  --app-purple-icon-fg: #5b21b6;
  --app-orange-bar:     #ea580c;
  --app-orange-icon-bg: #ffedd5;
  --app-orange-icon-fg: #9a3412;
  --app-pink-bar:       #db2777;
  --app-pink-icon-bg:   #fce7f3;
  --app-pink-icon-fg:   #9d174d;
  --app-indigo-bar:     #4f46e5;
  --app-indigo-icon-bg: #e0e7ff;
  --app-indigo-icon-fg: #3730a3;
  --app-cyan-bar:       #0891b2;
  --app-cyan-icon-bg:   #cffafe;
  --app-cyan-icon-fg:   #155e75;
  --app-lime-bar:       #65a30d;
  --app-lime-icon-bg:   #ecfccb;
  --app-lime-icon-fg:   #3f6212;
  --app-slate-bar:      #475569;
  --app-slate-icon-bg:  #e2e8f0;
  --app-slate-icon-fg:  #1e293b;
  --app-brown-bar:      #92613a;
  --app-brown-icon-bg:  #f2e8dc;
  --app-brown-icon-fg:  #6b4423;
  --app-yellow-bar:      #ca8a04;
  --app-yellow-icon-bg:  #fef9c3;
  --app-yellow-icon-fg:  #854d0e;
  --app-emerald-bar:     #059669;
  --app-emerald-icon-bg: #d1fae5;
  --app-emerald-icon-fg: #065f46;
  --app-sky-bar:         #0284c7;
  --app-sky-icon-bg:     #e0f2fe;
  --app-sky-icon-fg:     #075985;
  --app-violet-bar:      #6d28d9;
  --app-violet-icon-bg:  #f3e8ff;
  --app-violet-icon-fg:  #5b21b6;
  --app-rose-bar:        #e11d48;
  --app-rose-icon-bg:    #ffe4e6;
  --app-rose-icon-fg:    #9f1239;
  --app-amber-bar:       #d97706;
  --app-amber-icon-bg:   #fef3c7;
  --app-amber-icon-fg:   #92400e;
  --app-navy-bar:        #1e3a8a;
  --app-navy-icon-bg:    #dbeafe;
  --app-navy-icon-fg:    #1e3a8a;
  --app-maroon-bar:      #7f1d1d;
  --app-maroon-icon-bg:  #fee2e2;
  --app-maroon-icon-fg:  #7f1d1d;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);
  --shadow-green: 0 4px 14px rgba(45,106,79,.25);
  --shadow-gold:  0 4px 14px rgba(201,162,39,.25);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Transition ---------- */
  --transition-fast: all .15s ease;
  --transition-base: all .25s ease;
  --transition-slow: all .4s ease;

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    999;

  /* ---------- Layout ---------- */
  --sidebar-width:  220px;
  --topbar-height:  50px;
  --container-max:  1240px;
}