/**
 * Winged Wheel Podcast - Brand Style Guide
 *
 * Official design system for the WWP WordPress site.
 * Use these CSS variables globally for consistent branding.
 *
 * @package Kadence_Child_WWP
 */

/* Fonts loaded via Kadence Typography settings (Google Fonts) */

:root {
    /* ================================
       BRAND COLORS
       ================================ */
    --wwp-red: #C02026;
    --wwp-black: #231F20;
    --wwp-grey: #939598;
    --wwp-white: #FFFFFF;

    /* Color Aliases for Semantic Use */
    --wwp-primary: var(--wwp-red);
    --wwp-background: var(--wwp-black);
    --wwp-text-primary: var(--wwp-white);
    --wwp-text-secondary: var(--wwp-grey);
    --wwp-border: var(--wwp-grey);

    /* ================================
       TYPOGRAPHY
       ================================ */
    --wwp-font-heading: 'League Gothic', 'League Gothic Fallback', 'League Gothic Fallback Roboto', 'League Gothic Condensed', sans-serif;
    --wwp-font-body: system-ui, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wwp-font-accent: 'League Gothic', 'League Gothic Fallback', 'League Gothic Fallback Roboto', sans-serif;

    /* Font Sizes */
    --wwp-text-xs: 0.75rem;
    --wwp-text-sm: 0.875rem;
    --wwp-text-base: 1rem;
    --wwp-text-lg: 1.125rem;
    --wwp-text-xl: 1.25rem;
    --wwp-text-2xl: 1.5rem;
    --wwp-text-3xl: 1.875rem;
    --wwp-text-4xl: 2.25rem;
    --wwp-text-5xl: 3rem;

    /* ================================
       UI STANDARDS
       ================================ */
    --wwp-radius: 12px;
    --wwp-radius-sm: 6px;
    --wwp-radius-lg: 16px;

    /* Spacing */
    --wwp-spacing-xs: 0.5rem;
    --wwp-spacing-sm: 1rem;
    --wwp-spacing-md: 1.5rem;
    --wwp-spacing-lg: 2rem;
    --wwp-spacing-xl: 3rem;

    /* Transitions */
    --wwp-transition: all 0.3s ease;
    --wwp-transition-fast: all 0.15s ease;
}

/* ================================
   WWP-SCOPED UTILITY CLASSES ONLY
   No global selectors - frontend only
   ================================ */

/* WWP-specific link styling */
.wwp-accent {
    color: var(--wwp-primary);
    text-decoration: none;
    transition: var(--wwp-transition);
}

.wwp-accent:hover {
    color: var(--wwp-white);
    filter: brightness(1.2);
}

/* ================================
   UTILITY CLASSES
   ================================ */

/* Background Colors */
.wwp-bg-black { background-color: var(--wwp-black); }
.wwp-bg-red { background-color: var(--wwp-red); }
.wwp-bg-grey { background-color: var(--wwp-grey); }
.wwp-bg-white { background-color: var(--wwp-white); }

/* Text Colors */
.wwp-text-red { color: var(--wwp-red); }
.wwp-text-black { color: var(--wwp-black); }
.wwp-text-grey { color: var(--wwp-grey); }
.wwp-text-white { color: var(--wwp-white); }

/* Container Standard */
.wwp-container {
    background-color: var(--wwp-black);
    border-radius: var(--wwp-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--wwp-spacing-lg);
}

/* Button Styles */
.wwp-button {
    display: inline-block;
    background-color: var(--wwp-red);
    color: var(--wwp-white);
    font-family: var(--wwp-font-heading);
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: var(--wwp-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--wwp-transition);
}

.wwp-button:hover {
    background-color: var(--wwp-white);
    color: var(--wwp-black);
}

/* Hover State Standard */
.wwp-hover-red:hover {
    color: var(--wwp-red);
}

.wwp-hover-bright:hover {
    filter: brightness(1.2);
}