/**
 * WP Course Showcase - Design Tokens (Variables)
 * Single source of truth for all colors, typography, spacing.
 * Conforms to "Warm Light Editorial Product UI" design contract.
 *
 * @package WP_Course_Showcase
 */

:root {
    /* ==========================================================================
       1. Brand Primitives (Source of Truth)
       ========================================================================== */

    /* Neutrals */
    --color-neutral-bg-base: #FAFAF8;
    --color-neutral-bg-elevated: #FFFFFF;
    --color-neutral-bg-subtle: #F5F3F0;
    --color-neutral-text: #2C2C2C;
    --color-neutral-text-secondary: #6B6B6B;
    --color-neutral-text-muted: #9A9A9A;
    --color-neutral-border: #E8E6E3;
    --color-neutral-border-medium: #D4D2CF;

    /* Accent Family (Mauve) */
    --color-mauve-main: #AE8581;
    --color-mauve-hover: #9A7470;
    --color-mauve-light: #E8D9D5;
    --color-mauve-lighter: #F5EFED;
    --color-mauve-glow: rgba(174, 133, 129, 0.3);

    /* Semantic Colors */
    --color-success: #7C9885;
    --color-success-bg: #EAF2ED;
    --color-info: #8B9DC3;
    --color-info-bg: #EAEFF8;
    --color-warning: #D4A574;
    --color-warning-bg: #F9F2EA;
    --color-error: #B4726F;
    --color-error-bg: #F6E9E9;

    /* ==========================================================================
       2. Semantic Tokens (Usage)
       ========================================================================== */

    /* Colors */
    --wpcs-color-primary: var(--color-mauve-main);
    --wpcs-color-primary-dark: var(--color-mauve-hover);
    --wpcs-color-primary-hover: var(--color-mauve-hover);
    --wpcs-color-primary-light: var(--color-mauve-light);
    --wpcs-color-secondary: var(--color-neutral-text);
    /* Used for buttons mostly */

    /* Backgrounds */
    --wpcs-color-bg-page: var(--color-neutral-bg-base);
    --wpcs-color-paper: var(--color-neutral-bg-elevated);
    --wpcs-color-bg-subtle: var(--color-neutral-bg-subtle);

    /* Text */
    --wpcs-color-text-main: var(--color-neutral-text);
    --wpcs-color-text-secondary: var(--color-neutral-text-secondary);
    --wpcs-color-text-muted: var(--color-neutral-text-muted);
    --wpcs-color-text-inverse: #FFFFFF;
    --wpcs-color-text-on-primary: #FFFFFF;

    /* Borders */
    --wpcs-color-border: var(--color-neutral-border);
    --wpcs-color-border-medium: var(--color-neutral-border-medium);
    --wpcs-color-border-accent: var(--color-mauve-main);

    /* Semantic Status */
    --wpcs-color-success: var(--color-success);
    --wpcs-color-success-bg: var(--color-success-bg);
    --wpcs-color-warning: var(--color-warning);
    --wpcs-color-warning-bg: var(--color-warning-bg);
    --wpcs-color-error: var(--color-error);
    --wpcs-color-error-bg: var(--color-error-bg);
    --wpcs-color-info: var(--color-info);
    --wpcs-color-info-bg: var(--color-info-bg);

    /* ==========================================================================
       3. Typography
       ========================================================================== */
    --wpcs-font-sans: 'Lato', system-ui, -apple-system, sans-serif;
    --wpcs-font-mono: 'JetBrains Mono', monospace;

    /* Fluid Scale (Desktop baselines) */
    --wpcs-font-size-xs: 0.75rem;
    /* 12px */
    --wpcs-font-size-sm: 0.8125rem;
    /* 13px */
    --wpcs-font-size-base: 1rem;
    /* 16px */
    --wpcs-font-size-lg: 1.125rem;
    /* 18px */
    --wpcs-font-size-xl: 1.25rem;
    /* 20px */
    --wpcs-font-size-2xl: 1.5rem;
    /* 24px */
    --wpcs-font-size-3xl: 2rem;
    /* 32px */
    --wpcs-font-size-4xl: 3rem;
    /* 48px */

    --wpcs-line-height-tight: 1.1;
    --wpcs-line-height-normal: 1.7;
    --wpcs-line-height-relaxed: 1.85;

    /* ==========================================================================
       4. Spacing (8px Grid)
       ========================================================================== */
    --wpcs-space-1: 0.25rem;
    /* 4px */
    --wpcs-space-2: 0.5rem;
    /* 8px */
    --wpcs-space-3: 0.75rem;
    /* 12px */
    --wpcs-space-4: 1rem;
    /* 16px */
    --wpcs-space-5: 1.25rem;
    /* 20px */
    --wpcs-space-6: 1.5rem;
    /* 24px */
    --wpcs-space-8: 2rem;
    /* 32px */
    --wpcs-space-10: 2.5rem;
    /* 40px */
    --wpcs-space-12: 3rem;
    /* 48px */

    /* ==========================================================================
       5. Radii & Shapes
       ========================================================================== */
    --wpcs-radius-sm: 8px;
    --wpcs-radius-md: 12px;
    --wpcs-radius-lg: 16px;
    --wpcs-radius-xl: 24px;
    --wpcs-radius-pill: 999px;

    /* ==========================================================================
       6. Shadows & Effects
       ========================================================================== */
    --wpcs-shadow-sm: 0 2px 8px rgba(44, 44, 44, 0.04);
    --wpcs-shadow-md: 0 8px 24px rgba(44, 44, 44, 0.08);
    --wpcs-shadow-lg: 0 16px 52px rgba(44, 44, 44, 0.10);
    /* Kept calculated from PROMPT 0 logic if not specified, but usually safe */
    --wpcs-shadow-glow: 0 0 36px var(--color-mauve-glow);
    --wpcs-shadow-cta: 0 6px 20px rgba(174, 133, 129, 0.22);

    /* ==========================================================================
       7. Gradients
       ========================================================================== */
    --wpcs-gradient-hero: linear-gradient(135deg, #AE8581 0%, #C9A59A 100%);
    --wpcs-gradient-card: linear-gradient(160deg, rgba(174, 133, 129, 0.08) 0%, rgba(201, 165, 154, 0.02) 100%);
    --wpcs-gradient-shine: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.12) 50%, transparent 75%);

    /* ==========================================================================
       8. Transitions
       ========================================================================== */
    --wpcs-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --wpcs-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --wpcs-transition-fast: 100ms var(--wpcs-ease-out-expo);
    --wpcs-transition-base: 200ms var(--wpcs-ease-out-expo);
    --wpcs-transition-slow: 400ms var(--wpcs-ease-out-expo);

    /* ==========================================================================
       9. Layout Z-Index
       ========================================================================== */
    --wpcs-z-base: 1;
    --wpcs-z-sticky: 20;
    --wpcs-z-modal: 100;
    --wpcs-z-toast: 200;
}