/* ─── RESET & ROOT ───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --text-primary: #1A1A18;
  --text-secondary: #6B6B65;
  --text-muted: #6B7280;
  --divider: #EBEBEA;
  --divider-strong: #D4D4CF;

  /* Brand */
  --accent: #6B56E8;
  --accent-soft: #EEE9FF;
  --accent-mid: #BFB3F7;

  /* Income palette — frosted mint */
  --income-bg: #EEF9F3;
  --income-bg-hover: #E1F4EA;
  --income-border: rgba(34,197,94,0.15);
  --income-amount: #16A34A;
  --income-amount-bg: #DCFCE7;

  /* Expense palette — pale lavender */
  --expense-bg: #F2EFFF;
  --expense-bg-hover: #EAE5FF;
  --expense-border: rgba(124,92,191,0.14);
  --expense-amount: #6B32C8;
  --expense-amount-bg: #EDE9FF;

  /* Today */
  --today-accent: #4F6EF7;
  --today-soft: #EEF1FF;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(26,26,24,0.05), 0 1px 2px rgba(26,26,24,0.04);
  --shadow-sm: 0 2px 8px rgba(26,26,24,0.06), 0 1px 3px rgba(26,26,24,0.04);
  --shadow-md: 0 8px 24px rgba(26,26,24,0.07), 0 2px 8px rgba(26,26,24,0.04);
  --shadow-lg: 0 20px 60px rgba(26,26,24,0.10), 0 4px 16px rgba(26,26,24,0.06);
  --shadow-modal: 0 32px 80px rgba(26,26,24,0.14), 0 8px 24px rgba(26,26,24,0.08);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 100px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;

  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  --dur-fast:   0.15s;
  --dur-normal: 0.20s;
  --dur-slow:   0.30s;
  --ease-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  --error: #EF4444;
  --error-bg: #FEF2F2;
  --error-border: #FCA5A5;
  --warning-color: #D97706;
  --pending-color: #D97706;

  --z-base:      1;
  --z-chip:      50;
  --z-tooltip:   100;
  --z-dropdown:  200;
  --z-popup:     300;
  --z-overlay:   400;
  --z-toast:     500;
  --z-milestone: 600;
  --z-coach:     700;
  --z-top:       900;

  font-size: 16px;
  
  --pending-bg: #FFFBEB;
  --pending-bg-hover: #FEF3C7;
  --pending-border: #F59E0B;
  --pending-border-alt: #D97706;
  --pending-amount-bg: #FEF3C7;
  --pending-amount-color: #D97706;
}

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  padding: 32px 40px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Prevent accidental text selection only on interactive drag targets */
.txn-chip, .row, .day-header, .icon-btn {
  user-select: none;
  -webkit-user-select: none;
}

/* Subtle noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.container { max-width: 1520px; margin: auto; position: relative; z-index: 1; }