/*
 * Copyright (c) 2026 Kyle Blizzard. All Rights Reserved.
 * This code is publicly visible for portfolio purposes only.
 * Unauthorized copying, forking, or distribution of this file,
 * via any medium, is strictly prohibited.
 */

/*
 * Theme Name:   GoWrestle Theme
 * Theme URI:    https://gowrestle.com
 * Description:  Dark, Netflix-style streaming theme for GoWrestle.com — pro wrestling on demand.
 *               Built as a GeneratePress child theme with a custom dark UI, horizontal scrolling
 *               category rows, Vimeo video embeds, and Indeed Membership Pro integration.
 * Author:       Kyle Blizzard
 * Author URI:   https://kyleblizzard.org
 * Template:     generatepress
 * Version:      2.0.0
 * Text Domain:  gowrestle-theme
 *
 * This stylesheet is intentionally minimal — it only defines CSS custom properties
 * (variables) used across the theme. All layout and component styles live in
 * assets/css/streaming.css to keep things organized.
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ==========================================================================
   These variables define every color, font, spacing, and effect used in the
   theme. Changing a value here updates it everywhere — no hunting through
   hundreds of lines of CSS. Think of these as the "settings panel" for the
   entire design.
   ========================================================================== */

:root {
    /* --- Backgrounds ---
       Layered from darkest (main bg) to lightest (interactive surfaces).
       The slight variation between levels creates depth without using borders. */
    --gw-black: #0d0d0d;
    --gw-bg: #0d0d0d;
    --gw-bg-elevated: #151515;
    --gw-bg-card: #1a1a1a;
    --gw-bg-card-hover: #222222;
    --gw-surface: #2a2a2a;

    /* --- Championship Gold ---
       The primary accent color. Gold = prestige, championships, premium content.
       Three shades: bright for active/hover, standard for accents, dark for shadows. */
    --gw-gold: #c9a84c;
    --gw-gold-bright: #e2c361;
    --gw-gold-dark: #a08435;

    /* --- Crimson Red ---
       Secondary accent for CTAs and high-energy elements.
       Red = urgency, action, wrestling energy. */
    --gw-red: #c41e3a;
    --gw-red-dark: #8b1528;
    --gw-red-glow: rgba(196, 30, 58, 0.3);

    /* --- Text Colors ---
       Warm off-white tones instead of pure white — easier on the eyes
       against the dark background and gives the site a more cinematic feel. */
    --gw-white: #f0ece2;
    --gw-text: #d4cfc4;
    --gw-text-muted: #8a8578;
    --gw-text-dim: #5a5549;

    /* --- Borders ---
       Subtle gold-tinted borders that reinforce the premium feel
       without being distracting. Two levels of visibility. */
    --gw-border: rgba(201, 168, 76, 0.12);
    --gw-border-strong: rgba(201, 168, 76, 0.25);

    /* --- Layout ---
       Header height is used for padding calculations (e.g., push content
       below the fixed header). Border radius keeps things slightly rounded
       without looking too "soft" — this is wrestling, not a wellness app. */
    --gw-header-height: 72px;
    --gw-radius: 4px;
    --gw-radius-lg: 8px;

    /* --- Typography ---
       Big Shoulders Display: Bold, condensed display font — feels like
       event posters and championship title cards.
       Barlow: Clean, readable body font that pairs well without competing. */
    --gw-font-display: 'Big Shoulders Display', 'Impact', sans-serif;
    --gw-font-body: 'Barlow', 'Helvetica Neue', sans-serif;

    /* --- Shadows & Effects ---
       Heavy shadows create the "floating card" effect on the dark background.
       The gold shadow is used sparingly for premium/highlighted elements. */
    --gw-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    --gw-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.8);
    --gw-shadow-gold: 0 0 30px rgba(201, 168, 76, 0.15);

    /* --- Transitions ---
       The cubic-bezier curve gives a slight "ease-out" feel — elements
       accelerate quickly then settle smoothly. The fast variant is for
       micro-interactions like color changes on hover. */
    --gw-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --gw-transition-fast: 0.15s ease;
}