/* MoeMoney Dashboard Design System — CSS Custom Properties
   Navy + Emerald professional financial aesthetic */

:root {
  /* ── Brand Colors ── */
  --color-primary: #1E3A5F;
  --color-primary-light: #2A4E7A;
  --color-primary-dark: #152C49;
  --color-accent: #10B981;
  --color-accent-light: #34D399;
  --color-accent-dark: #059669;
  --color-negative: #EF4444;
  --color-negative-light: #FCA5A5;
  --color-warning: #F59E0B;
  --color-warning-light: #FCD34D;

  /* ── Light Mode (default) ── */
  --bg: #F8F9FB;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --text: #1A1F36;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --hover-bg: #F3F4F6;
  --input-bg: #FFFFFF;
  --sidebar-bg: #1E3A5F;
  --sidebar-text: #CBD5E1;
  --sidebar-text-active: #FFFFFF;
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(16, 185, 129, 0.15);
  --breadcrumb-bg: #FFFFFF;

  /* ── Chart Palette ── */
  --chart-navy: #1E3A5F;
  --chart-emerald: #10B981;
  --chart-indigo: #6366F1;
  --chart-amber: #F59E0B;
  --chart-rose: #F43F5E;
  --chart-teal: #14B8A6;
  --chart-sky: #38BDF8;
  --chart-purple: #A855F7;

  /* ── Spacing Scale (4px base) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-base: 0.875rem;/* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --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);

  /* ── Transitions ── */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;
  --content-max-width: 1400px;

  /* ── Z-Index Scale ── */
  --z-sidebar: 100;
  --z-topbar: 90;
  --z-modal: 200;
  --z-toast: 300;
}