/* ═══════════════════════════════════════════════════════════
   Design Tokens — The Balance Space
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand ─── */
  --color-sandstone: #993D2E;
  --color-light-stone: #C8C8C0;
  --color-slate-blue: #606668;
  --color-dark-slate: #383838;

  /* ─── Semantic (Light Theme) ─── */
  --color-primary: #993D2E;
  --color-primary-hover: #802820;
  --color-secondary: #2E8B57;
  --color-surface: #FFFFFF;
  --color-surface-white: #FDFBF9;
  --color-off-white: #F5F5F0;
  --color-background: #F5F5F0;
  --color-on-surface: #1C1C1E;
  --color-on-surface-dim: #6E6E73;
  --color-border: #E5E5EA;
  --color-error: #D32F2F;
  --color-warning: #F5A623;
  --color-info: #2196F3;
  --color-success: #2E8B57;

  /* ─── State tints ─── */
  --color-success-tint: #E8F5E9;
  --color-error-tint: #FDECEA;
  --color-warning-tint: #FFF3E0;
  --color-info-tint: #E3F2FD;

  /* ─── Typography ─── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* ─── Spacing ─── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ─── Elevation ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ─── Radius ─── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ─── Layout ─── */
  --nav-height: 56px;
  --topbar-height: 44px;
  --sidebar-width: 240px;
  --panel-width: 400px;
  --content-max-width: 1200px;

  /* ─── Z-index scale ─── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-panel: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 1000;
}

/* ─── Dark Mode ─── */
[data-theme="dark"] {
  --color-primary: #A04830;
  --color-primary-hover: #B05A3D;
  --color-secondary: #5DB882;
  --color-surface: #181818;
  --color-background: #101010;
  --color-on-surface: #F5F5F7;
  --color-on-surface-dim: #8E8E93;
  --color-border: #38383A;
  --color-error: #FF6B6B;
  --color-warning: #FFD060;
  --color-info: #64B5F6;
  --color-success: #5DB882;

  --color-success-tint: #1B3A1B;
  --color-error-tint: #3A1B1B;
  --color-warning-tint: #3A2E1B;
  --color-info-tint: #16263A;

  --color-sandstone: #A04830;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55);
}

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