:root {
  /* ── Color Palette (Cold Blue-Gray Light Theme) ── */
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-input: #F8FAFC;
  --bg-hover: rgba(71, 85, 105, 0.06);
  --bg-active: rgba(74, 144, 217, 0.10);

  --accent: #4A90D9;
  --accent-hover: #3A7BC8;
  --accent-light: rgba(74, 144, 217, 0.12);
  --danger: #C75B5B;
  --danger-hover: #B54A4A;
  --success: #5BA89D;
  --warning: #D4915E;
  --info: #4A90D9;

  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  --border: #E2E8F0;
  --border-light: #CBD5E1;
  --divider: rgba(148, 163, 184, 0.12);

  /* ── Spacing (8px multiples) ── */
  --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;
  --sp-16: 64px;

  /* ── Border Radius (Apple-style large radii) ── */
  --radius: 20px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-full: 9999px;

  /* ── Multi-Layer Light Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ── Glass Morphism ── */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.25);

  /* ── Transitions ── */
  --transition: 0.3s ease;
  --transition-fast: 0.2s ease;

  /* ── Layout ── */
  --tab-nav-height: 56px;
  --topnav-height: 56px;

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Noto Sans SC', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Consolas', monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
}

/* ── Dark Theme (Apple HIG Layered Grays) ── */
[data-theme="dark"] {
  --bg-primary: #1C1C1E;
  --bg-secondary: #2C2C2E;
  --bg-card: #2C2C2E;
  --bg-elevated: #3A3A3C;
  --bg-input: #3A3A3C;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(90, 159, 230, 0.15);

  --accent: #5A9FE6;
  --accent-hover: #6BADE8;
  --accent-light: rgba(90, 159, 230, 0.18);
  --danger: #E07070;
  --danger-hover: #E88A8A;
  --success: #70C4B8;
  --warning: #E0A870;
  --info: #5A9FE6;

  --text-primary: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-muted: #6E6E73;
  --text-inverse: #1C1C1E;

  --border: #3A3A3C;
  --border-light: #48484A;
  --divider: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);

  --glass-bg: rgba(28, 28, 30, 0.78);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}