/* ============================================
   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;

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

  /* Spacing */
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* 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;
}