/* Design Tokens for Dompet Keluarga */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand Colors - Primary Emerald */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;

  /* Income - Green/Teal */
  --color-income: #059669;
  --color-income-light: #ecfdf5;
  --color-income-border: #a7f3d0;

  /* Expense - Rose/Red */
  --color-expense: #e11d48;
  --color-expense-light: #fff1f2;
  --color-expense-border: #fecdd3;

  /* Transfer - Indigo/Blue */
  --color-transfer: #4f46e5;
  --color-transfer-light: #eef2ff;
  --color-transfer-border: #c7d2fe;

  /* Warning / Budget Status */
  --color-warning: #d97706;
  --color-warning-light: #fffbeb;
  --color-warning-border: #fde68a;

  /* Neutral / Slate Palette */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* App Surfaces */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-card: #ffffff;
  --border-subtle: #e2e8f0;
  --border-focus: #10b981;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-inverted: #ffffff;

  /* Elevations & Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px -3px rgba(16, 185, 129, 0.35);

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

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout dimensions */
  --sidebar-width: 260px;
  --header-height: 70px;
  --bottom-nav-height: 72px;
  --max-content-width: 1240px;

  /* Z-index layers */
  --z-base: 1;
  --z-header: 20;
  --z-bottom-nav: 40;
  --z-sidebar-backdrop: 80;
  --z-sidebar: 90;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-toast: 1100;
}