/* ============================================
   LocoMojo Design Tokens
   ============================================ */

:root {
  /* Backgrounds */
  --color-bg-primary: #0a0a0a;
  --color-bg-card: #111111;
  --color-bg-card-hover: #161616;
  --color-bg-white: #ffffff;
  --color-bg-alt: #f8f8f8;

  /* Brand Colors */
  --color-gold: #C19635;
  --color-gold-warm: #C19635;
  --color-gold-hover: #d4a93e;
  --color-maroon: #692122;
  --color-brown: #35302c;

  /* Text (dark backgrounds) */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-subtle: rgba(255, 255, 255, 0.4);

  /* Text (white backgrounds) */
  --color-text-dark: #000000;
  --color-text-dark-secondary: #555555;
  --color-text-dark-muted: #888888;

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.12);
  --color-border-medium: rgba(255, 255, 255, 0.2);
  --color-border-gold: #C19635;

  /* Effects */
  --shadow-gold-glow: 0 0 20px rgba(193, 150, 53, 0.3);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-nav: 'Montserrat', sans-serif;
  --font-accent: 'Cinzel', serif;
  --font-body-alt: 'Manrope', sans-serif;

  /* Spacing */
  --container-max: 1200px;
  --container-medium: 1100px;
  --container-narrow: 900px;
  --container-padding: 40px;
  --section-padding: 100px;
  --header-height: 86px;

  /* Transitions */
  --transition-default: 0.3s ease;
}

@media screen and (max-width: 768px) {
  :root {
    --container-padding: 24px;
    --section-padding: 60px;
  }
}