/* ==========================================================
   PET WELLNESS 360
   Core Variables
   Design System
   ========================================================== */

:root{

    /* ======================================================
       Brand Colors — Official
       ====================================================== */

    --pw-navy:#0D2C54;

    --pw-blue:#1E5AA6;

    --pw-green:#4CAF50;

    --pw-green-soft:#A8D08D;

    --pw-turquoise:#00A8B5;

    --pw-lavender:#6C63FF;

    --pw-yellow:#FFC857;

    --pw-coral:#FF6B6B;


    /* ======================================================
       Neutral Colors
       ====================================================== */

    --pw-white:#FFFFFF;

    --pw-gray:#F2F4F7;

    --pw-black:#1A1D21;

    --pw-gray-50:#FAFBFC;

    --pw-gray-100:#F2F4F7;

    --pw-gray-200:#EDF2F7;

    --pw-gray-300:#E2E8F0;

    --pw-gray-400:#CBD5E0;

    --pw-gray-500:#A0AEC0;

    --pw-gray-600:#718096;

    --pw-gray-700:#4A5568;

    --pw-gray-800:#2D3748;

    --pw-gray-900:#1A1D21;


    /* ======================================================
       Semantic
       ====================================================== */

    --pw-text:var(--pw-black);

    --pw-text-light:var(--pw-gray-600);

    --pw-background:var(--pw-white);

    --pw-section:var(--pw-gray);

    --pw-border:#E4E9F0;


    /* ======================================================
       Backward Compatibility
       ====================================================== */

    --pw-primary:var(--pw-blue);

    --pw-primary-dark:var(--pw-navy);

    --pw-primary-light:#3C76B9;

    --pw-secondary:var(--pw-green);

    --pw-secondary-dark:#3E9E46;

    --pw-secondary-light:var(--pw-green-soft);

    --pw-dark:var(--pw-black);


    /* ======================================================
       Typography
       ====================================================== */

    --pw-font-heading:'Montserrat',sans-serif;

    --pw-font-body:'Poppins',sans-serif;


    /* ======================================================
       Spacing
       ====================================================== */

    --space-0:0;

    --space-1:.25rem;

    --space-2:.5rem;

    --space-3:.75rem;

    --space-4:1rem;

    --space-5:1.5rem;

    --space-6:2rem;

    --space-7:3rem;

    --space-8:4rem;

    --space-9:6rem;

    --space-10:8rem;


    /* ======================================================
       Radius
       ====================================================== */

    --pw-radius-xs:4px;

    --pw-radius-sm:8px;

    --pw-radius-md:14px;

    --pw-radius-lg:22px;

    --pw-radius-xl:32px;

    --pw-radius-round:999px;


    /* ======================================================
       Backward-Compatible Radius
       ====================================================== */

    --radius-xs:var(--pw-radius-xs);

    --radius-sm:var(--pw-radius-sm);

    --radius-md:var(--pw-radius-md);

    --radius-lg:var(--pw-radius-lg);

    --radius-xl:var(--pw-radius-xl);

    --radius-round:var(--pw-radius-round);


    /* ======================================================
       Shadows
       ====================================================== */

    --pw-shadow-xs:
            0 2px 6px rgba(0,0,0,.04);

    --pw-shadow-sm:
            0 6px 18px rgba(0,0,0,.06);

    --pw-shadow-md:
            0 14px 40px rgba(0,0,0,.08);

    --pw-shadow-lg:
            0 22px 60px rgba(0,0,0,.12);

    --pw-shadow-header:
            0 2px 14px rgba(13,44,84,.08);


    /* ======================================================
       Backward-Compatible Shadows
       ====================================================== */

    --shadow-xs:var(--pw-shadow-xs);

    --shadow-sm:var(--pw-shadow-sm);

    --shadow-md:var(--pw-shadow-md);

    --shadow-lg:var(--pw-shadow-lg);


    /* ======================================================
       Transitions
       ====================================================== */

    --pw-transition-fast:.20s ease;

    --pw-transition:.35s ease;

    --pw-transition-slow:.55s ease;

    --transition-fast:var(--pw-transition-fast);

    --transition:var(--pw-transition);

    --transition-slow:var(--pw-transition-slow);


    /* ======================================================
       Containers
       ====================================================== */

    --pw-container:1320px;

    --size-container:1320px;

    --container:1320px;


    /* ======================================================
       Header
       ====================================================== */

    --pw-header-topbar-height:36px;

    --pw-header-height:82px;

    --navbar-height:82px;


    /* ======================================================
       Sections
       ====================================================== */

    --section-space:120px;

    --section-space-mobile:70px;


    /* ======================================================
       Size Scale
       ====================================================== */

    --size-xs:16px;

    --size-sm:24px;

    --size-md:32px;

    --size-lg:48px;

    --size-xl:64px;

    --size-2xl:96px;

    --size-3xl:128px;

    --size-logo:460px;


    /* ======================================================
       Elevation
       ====================================================== */

    --elevation-1:
            0 2px 6px rgba(0,0,0,.05);

    --elevation-2:
            0 8px 20px rgba(0,0,0,.08);

    --elevation-3:
            0 15px 40px rgba(0,0,0,.10);

    --elevation-4:
            0 25px 60px rgba(0,0,0,.12);

    --elevation-5:
            0 40px 80px rgba(0,0,0,.16);


    /* ======================================================
       Blur
       ====================================================== */

    --blur-xs:6px;

    --blur-sm:12px;

    --blur-md:18px;

    --blur-lg:30px;

    --blur-xl:60px;


    /* ======================================================
       Opacity
       ====================================================== */

    --opacity-10:.10;

    --opacity-20:.20;

    --opacity-30:.30;

    --opacity-40:.40;

    --opacity-50:.50;

    --opacity-60:.60;

    --opacity-70:.70;

    --opacity-80:.80;

    --opacity-90:.90;

}