/**
 * CSS Custom Properties — Colors, Fonts, Spacing
 *
 * All sizing uses vw/vh viewport units for fluid responsiveness.
 * Only px values appear inside clamp() min/max bounds.
 *
 * @package WB_Developer_Theme
 */

:root {
    /* === Primary Colors === */
    --color-gold:            #C8902E;
    --color-gold-light:      #E8B95A;
    --color-gold-dark:       #A06E1D;

    /* === Secondary Colors === */
    --color-green:           #2D6A3F;
    --color-green-light:     #3D8B54;
    --color-green-dark:      #1E4A2C;

    /* === Accent Colors === */
    --color-burgundy:        #7B2D3B;
    --color-burnt-orange:    #C4541A;

    /* === Neutral Colors === */
    --color-cream:           #FDF8F0;
    --color-ivory:           #FAF5EB;
    --color-brown-dark:      #3B2415;
    --color-brown-medium:    #5C3D2E;
    --color-gray-light:      #E8E2D9;
    --color-white:           #FFFFFF;

    /* === Special Colors === */
    --color-cert-gold:       #D4AF37;

    /* === Semantic Color Aliases === */
    --color-text-primary:    var(--color-brown-dark);
    --color-text-secondary:  var(--color-brown-medium);
    --color-bg-primary:      var(--color-cream);
    --color-bg-secondary:    var(--color-ivory);
    --color-bg-dark:         var(--color-green-dark);
    --color-cta-primary:     var(--color-burnt-orange);
    --color-cta-hover:       var(--color-gold);
    --color-link:            var(--color-green);
    --color-link-hover:      var(--color-green-light);
    --color-success:         var(--color-green);
    --color-error:           #B83232;
    --color-warning:         var(--color-gold);

    /* === Fonts === */
    --font-heading:          'Lora', serif;
    --font-body:             'Inter', sans-serif;
    --font-accent:           'Poppins', sans-serif;

    /* === Font Sizes (vw with clamp bounds) === */
    --text-xs:               clamp(10px, 0.75vw, 13px);
    --text-sm:               clamp(12px, 0.9vw, 15px);
    --text-base:             clamp(14px, 1.1vw, 18px);
    --text-md:               clamp(16px, 1.25vw, 20px);
    --text-lg:               clamp(18px, 1.5vw, 24px);
    --text-xl:               clamp(22px, 2vw, 32px);
    --text-2xl:              clamp(28px, 2.5vw, 42px);
    --text-3xl:              clamp(34px, 3.2vw, 56px);
    --text-4xl:              clamp(42px, 4vw, 72px);

    /* === Spacing (vw with clamp bounds) === */
    --spacing-xs:            clamp(4px, 0.5vw, 8px);
    --spacing-sm:            clamp(8px, 1vw, 14px);
    --spacing-md:            clamp(14px, 2vw, 28px);
    --spacing-lg:            clamp(20px, 4vw, 56px);
    --spacing-xl:            clamp(28px, 6vw, 84px);
    --spacing-2xl:           clamp(36px, 8vw, 112px);

    /* === Container === */
    --container-width:       85vw;
    --container-max:         clamp(320px, 85vw, 1440px);
    --container-pad:         clamp(12px, 2vw, 28px);

    /* === Section Heights === */
    --section-hero:          100vh;
    --section-min:           50vh;
    --section-pad:           8vh;

    /* === Header === */
    --header-height:         clamp(60px, 5vw, 90px);

    /* === Border Radius (vw with clamp bounds) === */
    --radius-sm:             clamp(3px, 0.3vw, 5px);
    --radius-md:             clamp(5px, 0.5vw, 8px);
    --radius-lg:             clamp(8px, 1vw, 14px);
    --radius-full:           50%;

    /* === Shadows === */
    --shadow-sm:             0 1px 3px rgba(59, 36, 21, 0.08);
    --shadow-md:             0 2px 8px rgba(59, 36, 21, 0.12);
    --shadow-lg:             0 4px 16px rgba(59, 36, 21, 0.16);

    /* === Transitions === */
    --transition-fast:       0.2s ease;
    --transition-base:       0.3s ease;
    --transition-slow:       0.5s ease;
}