/*
 * =============================================================
 *  OUT WEST GLOW GOLF — COLOR SCHEME & DESIGN TOKENS
 *  ─────────────────────────────────────────────────────────────
 *  TO RETHEME THE ENTIRE SITE: edit ONLY this file.
 *  Every color, glow, and font in the site references these
 *  CSS custom properties.
 *
 *  COLOR SCHEME: DECIDED — Purple + Sunset Amber + Course Blue
 *  Drawn from Barry the Burro mascot art:
 *    • Purple  = the glow / blacklight color (Barry's outline & bandana)
 *    • Amber   = warm sunset yellow-orange (Barry's glowing golf ball)
 *    • Blue    = course / brick accent
 *    • Black   = background (logo works seamlessly on dark)
 * =============================================================
 */

:root {

  /* ─────────────────────────────────────────────
     BACKGROUNDS
     Dark theme required for blacklight/glow look
     ───────────────────────────────────────────── */
  --bg-base:        #07070d;   /* Page background — near black with purple tint */
  --bg-surface:     #0f0d18;   /* Card / section background */
  --bg-elevated:    #1a1628;   /* Hover states, dropdowns */
  --bg-overlay:     rgba(7, 7, 13, 0.88); /* Hero overlays, modals */

  /* ─────────────────────────────────────────────
     BRAND COLORS — FINAL
     Purple + Sunset Amber palette
     ───────────────────────────────────────────── */
  --brand-primary:    #FFAA00;   /* Sunset amber — yellow with a hint of orange */
  --brand-secondary:  #8B2FC9;   /* Deep purple — matching Barry's bandana */
  --brand-accent:     #B44FFF;   /* Bright UV purple — the GLOW color */
  --brand-highlight:  #4A9FFF;   /* Course blue — brick/path accent */

  /* ─────────────────────────────────────────────
     GLOW / NEON EFFECTS
     Purple is the primary glow (blacklight effect)
     Amber is the warm secondary glow
     ───────────────────────────────────────────── */
  --glow-primary:   0 0 8px rgba(180, 79, 255, 0.6),
                    0 0 28px rgba(180, 79, 255, 0.35);
  --glow-secondary: 0 0 8px rgba(255, 170, 0, 0.5),
                    0 0 24px rgba(255, 170, 0, 0.3);
  --glow-accent:    0 0 8px rgba(180, 79, 255, 0.6),
                    0 0 28px rgba(180, 79, 255, 0.35);
  --glow-blue:      0 0 8px rgba(74, 159, 255, 0.5),
                    0 0 20px rgba(74, 159, 255, 0.25);
  --glow-white:     0 0 8px rgba(255, 255, 255, 0.4),
                    0 0 20px rgba(255, 255, 255, 0.2);

  /* ─────────────────────────────────────────────
     TEXT
     ───────────────────────────────────────────── */
  --text-primary:   #f0f0f8;   /* Main body text */
  --text-muted:     #8888aa;   /* Secondary / helper text */
  --text-faint:     #44445a;   /* Dividers, placeholders */
  --text-inverse:   #07070f;   /* Text on light/colored backgrounds */
  --text-link:      var(--brand-accent);

  /* ─────────────────────────────────────────────
     BUTTONS
     ───────────────────────────────────────────── */
  --btn-primary-bg:    var(--brand-primary);
  --btn-primary-text:  #07070d;    /* Dark text on amber button */
  --btn-primary-hover: #ffc233;    /* Brighter amber on hover */

  --btn-secondary-bg:    transparent;
  --btn-secondary-border: var(--brand-accent);
  --btn-secondary-text:   var(--brand-accent);
  --btn-secondary-hover-bg: rgba(180, 79, 255, 0.12);

  --btn-cta-bg:    var(--brand-secondary);   /* Deep purple CTA */
  --btn-cta-text:  #f0f0f8;
  --btn-cta-hover: #a040e8;                  /* Brighter purple on hover */

  /* ─────────────────────────────────────────────
     UI ELEMENTS
     ───────────────────────────────────────────── */
  --border-subtle:  rgba(180, 79, 255, 0.1);
  --border-visible: rgba(180, 79, 255, 0.2);
  --border-accent:  rgba(180, 79, 255, 0.45);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────── */
  --font-display: 'Exo 2', 'Arial Black', sans-serif;  /* Headlines */
  --font-body:    'Nunito', 'Segoe UI', sans-serif;     /* Body text */
  --font-mono:    'Courier New', monospace;

  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */

  /* ─────────────────────────────────────────────
     SPACING
     ───────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  --section-py: var(--space-2xl);  /* Vertical padding for page sections */
  --max-width:  1200px;
  --content-width: 780px;

  /* ─────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ─────────────────────────────────────────────
     NAV
     ───────────────────────────────────────────── */
  --nav-height: 70px;
  --nav-bg:     rgba(7, 7, 15, 0.95);
  --nav-border: var(--border-subtle);

}