/* =============================================
   Theme Variables — light & dark mode
   ============================================= */

:root {
  /* Layout */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-subtle: #F5F5F5;
  --color-border: #E5E5E5;

  /* Typography */
  --color-text-main: #171717;
  --color-text-muted: #737373;

  /* Balance / Open Items */
  --color-balance-owed: #dc2626;
  --color-balance-credit: #fb923c;
  --color-balance-ok: #059669;

  /* Semantic Status Colors */
  --color-error: #dc2626;
  --color-error-light: #fef2f2;
  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-info: #3b82f6;
  --color-info-light: #eff6ff;

  /* Brand */
  --color-brand-red: #dc2626;
}

.dark {
  /* Layout */
  --color-bg: #0a0a0a;
  --color-surface: #171717;
  --color-subtle: #1a1a1a;
  --color-border: #262626;

  /* Typography */
  --color-text-main: #F5F5F5;
  --color-text-muted: #a3a3a3;

  /* Balance / Open Items */
  --color-balance-owed: #f87171;
  --color-balance-credit: #fb923c;
  --color-balance-ok: #34d399;

  /* Semantic Status Colors */
  --color-error: #f87171;
  --color-error-light: rgba(239,68,68,0.1);
  --color-warning: #fbbf24;
  --color-warning-light: rgba(245,158,11,0.1);
  --color-success: #34d399;
  --color-success-light: rgba(16,185,129,0.1);
  --color-info: #60a5fa;
  --color-info-light: rgba(59,130,246,0.1);

  /* Brand */
  --color-brand-red: #f87171;
}