:root {
  /* Colors */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F8F9FA;
  --border: #E5E7EB;
  --border-focus: #1A56DB;

  --primary: #1A56DB;
  --primary-hover: #1446B8;
  --primary-light: #EBF0FB;

  --success: #057A55;
  --success-light: #E3F8EE;
  --warning: #C27803;
  --warning-light: #FDF3DC;
  --danger: #E02424;
  --danger-light: #FDE8E8;

  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6B7280;
  --text-4: #9CA3AF;

  /* Typography */
  --font: 'DM Sans', sans-serif;

  /* Spacing */
  --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;

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

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

  /* Layout */
  --sidebar-w: 240px;
  --nav-h: 60px;
  --bottom-nav-h: 64px;
}