:root {
  /* Brand Colors (Logo-derived) */
  --brand-gold-primary: #E88634;
  --brand-gold-secondary: #D87A2F;
  --brand-royal-base: #1A1A1A;
  --brand-cream: #E5D5B7;

  /* Surface Tokens (Light Mode) */
  --surface-0: #ffffff;
  --surface-1: #faf8f4;
  --surface-2: #f4efe6;
  --surface-3: #efe8dc;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* Text Tokens (Light Mode) */
  --text-strong: #1A1A1A;
  --text-normal: #3f3a33;
  --text-muted: #7a7166;
  --text-disabled: #b2a89a;
  --text-on-accent: #ffffff;

  /* Border Tokens */
  --border-subtle: #efe8dc;
  --border-normal: #e2d8c7;
  --border-strong: #c7bca8;

  /* Accent Tokens */
  --accent: var(--brand-gold-primary);
  --accent-strong: var(--brand-gold-secondary);
  --accent-soft: rgba(232, 134, 52, 0.12);
  --accent-soft-hover: rgba(232, 134, 52, 0.18);

  /* State Tokens */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.12);

  /* Elevation (Shadows) */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.4);

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

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Stack */
  --z-base: 0;
  --z-sticky: 100;
  --z-sidebar: 1000;
  --z-nav-mobile: 3000;
  --z-nav-dropdown: 4000;
  --z-nav-toggle: 4001;
  --z-panels: 5500;
  --z-modal-backdrop: 6900;
  --z-modal: 7000;
  --z-toast: 7100;
  --z-error-toast: 7200;
  --z-error-detail-modal: 7300;
}

[data-theme="dark"] {
  --surface-0: #0e1218;
  --surface-1: #151b23;
  --surface-2: #1d2430;
  --surface-3: #232b38;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-strong: #e6edf5;
  --text-normal: #b9c4d3;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-on-accent: #1A1A1A;

  --border-subtle: #2a3342;
  --border-normal: #3a4658;
  --border-strong: #4a5668;

  --accent: #E88634;
  --accent-strong: #D87A2F;
  --accent-soft: rgba(232, 134, 52, 0.15);
  --accent-soft-hover: rgba(232, 134, 52, 0.25);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-4: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.5);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}