/* ============================================
   HFG CAPITAL — CSS Variables (ICONIQ Design)
   ============================================ */

:root {
  /* Colors */
  --color-bg: #FAF9F7;
  --color-bg-dark: #1A1A1A;
  --color-text: #1A1A1A;
  --color-text-light: #FFFFFF;
  --color-text-muted: #6B6B6B;
  --color-gold: #B59A5C;
  --color-gold-light: #D4C08A;
  --color-gold-dim: rgba(181, 154, 92, 0.15);
  --color-navy: #1B2A4A;
  --color-deep-green: #2A3D2E;
  --color-warm-taupe: #8C7B6B;
  --color-cream: #F0EBE3;
  --color-border: rgba(26, 26, 26, 0.08);
  --color-error: #C0392B;
  --color-success: #27AE60;
  --color-input-bg: #FAFAFA;
  --color-input-border: #E0E0E0;
  --color-btn-hover: #2C2C2C;
  --color-overlay-light: rgba(250, 249, 247, 0.65);
  --color-overlay-dark: rgba(15, 15, 17, 0.60);

  /* Typography */
  --font-display: 'Marcellus', serif;
  --font-body: 'Open Sans', sans-serif;

  /* Spacing */
  --spacing-lg: 3rem;
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;

  /* Font aliases */
  --font-heading: var(--font-display);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  /* Z-index scale */
  --z-bg: 1;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
  --color-bg: #0F0F11;
  --color-bg-dark: #1A1A1C;
  --color-text: #EAE7E1;
  --color-text-light: #FFFFFF;
  --color-text-muted: #8A8A8A;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-cream: #1A1A1C;
  --color-navy: #0D1520;
  --color-deep-green: #0D1A10;
  --color-input-bg: #0F0F11;
  --color-input-border: rgba(255, 255, 255, 0.1);
  --color-btn-hover: var(--color-gold-light);
  --color-overlay-light: rgba(15, 15, 17, 0.60);
  --color-overlay-dark: rgba(15, 15, 17, 0.60);
}