/**
 * Referral Program - CSS Variables
 *
 * This file extends the core design system with referral-specific variables.
 * Core variables (colors, fonts, spacing) are inherited from:
 * - static/css/variables.css (core design system)
 * - static/css/base/variables.css (base variables)
 *
 * Only referral-specific customizations should be defined here.
 */

/* ============================================
   Referral-Specific Variables Only
   ============================================ */
:root {
  /* Note: Core variables (--primary-color, --accent-color, --font-family-heading, etc.)
     are inherited from the core design system loaded in base.html */
  
  /* Referral-specific color aliases (for backward compatibility) */
  --referral-primary: var(--primary-color, #0c2340);
  --referral-primary-dark: var(--primary-color-dark, #0a1d33);
  --referral-primary-light: var(--primary-color-light, #1a3a5a);
  
  --referral-accent: var(--accent-color, #d4af37);
  --referral-accent-light: var(--accent-color-light, #e9d38b);
  --referral-accent-dark: var(--accent-color-dark, #b49225);
  
  /* ============================================
     Referral Specific Gradients
     Uses core color variables for consistency
     ============================================ */
  --brand-gradient: linear-gradient(135deg, var(--primary-color, #0c2340) 0%, var(--primary-color-light, #1a3a5a) 100%);
  --brand-gradient-hover: linear-gradient(135deg, var(--primary-color-dark, #0a1d33) 0%, var(--primary-color, #0c2340) 100%);
  --brand-gradient-gold: linear-gradient(135deg, var(--accent-color, #d4af37) 0%, var(--accent-color-light, #e9d38b) 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(12, 35, 64, 0.06) 0%, rgba(212, 175, 55, 0.06) 100%);

  /* ============================================
     Glass Morphism
     ============================================ */
  --bg-glass: rgba(255, 255, 255, 0.9);
  --bg-glass-strong: rgba(255, 255, 255, 0.95);
  --glass-backdrop: blur(12px);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* ============================================
     Spacing (uses core spacing scale)
     ============================================ */
  --section-padding: var(--spacing-4xl, clamp(4rem, 8vw, 6rem));
  --container-max: 1200px;
  --grid-gap: var(--spacing-xl, clamp(1.5rem, 3vw, 2.5rem));
}

/* ============================================
   Dark Theme Overrides
   Note: Core dark mode variables are handled by core dark-mode CSS
   Only referral-specific dark mode overrides here
   ============================================ */
[data-theme="dark"] {
  /* Use core dark mode variables */
  --color-background: var(--color-dark-bg, #1a1a1a);
  --color-background-secondary: var(--color-dark-bg-light, #2a2a2a);
  --color-background-tertiary: var(--color-dark-bg-lighter, #3a3a3a);
  --color-text-primary: var(--color-dark-text, #f8f9fa);
  --color-text-secondary: var(--color-dark-text-secondary, #cccccc);
  --color-text-muted: var(--gray-500, #9ca3af);
  --color-border: var(--color-dark-border, rgba(255, 255, 255, 0.1));
  --color-border-light: rgba(255, 255, 255, 0.05);
  
  /* Referral-specific dark mode overrides */
  --bg-glass: rgba(12, 35, 64, 0.85);
  --bg-glass-strong: rgba(12, 35, 64, 0.95);
  --glass-border: rgba(255, 255, 255, 0.1);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(212, 175, 55, 0.05) 100%);
}