/**
 * TOYZA E-Commerce Design System Variables & Tokens
 * Brand: TOYZA (Premium, Playful Online Toy Store)
 * Visual Tone: Vibrant Hot-Pink CTAs, Deep Navy Typography, Pastel Accents, Rounded Geometry
 */

:root {
    /* -------------------------------------------------------------------------
       Primary Brand Colors (Navy & Hot-Pink)
    ------------------------------------------------------------------------- */
    --toyza-navy-900:      #121530; /* Darkest navy for high-contrast headers */
    --toyza-navy-800:      #1E224F; /* Main brand navy for titles and bold text */
    --toyza-navy-700:      #2A2F62; /* Secondary titles */
    --toyza-navy-500:      #555B86; /* Body text & muted captions */
    --toyza-navy-300:      #8D93B8; /* Disabled text & borders */
    --toyza-navy-100:      #E4E7F4; /* Ultra-light navy borders */

    /* Vibrant Hot-Pink CTAs */
    --toyza-pink-500:      #FF2E93; /* Core brand CTA button & highlights */
    --toyza-pink-600:      #E6007A; /* Button hover & active focus state */
    --toyza-pink-700:      #BD0064; /* Active pressed state */
    --toyza-pink-100:      #FFF0F6; /* Soft pastel pink container & chips */
    --toyza-pink-50:       #FFF8FB; /* Very light pink background tint */

    /* -------------------------------------------------------------------------
       Playful Pastel Accents (Categorization, Age Pills & Section Backdrops)
    ------------------------------------------------------------------------- */
    --toyza-lavender-500:  #8B7CF8;
    --toyza-lavender-100:  #F0EEFF; /* Lavender section container */
    --toyza-lavender-50:   #F8F7FF;

    --toyza-blue-500:      #38B6FF;
    --toyza-blue-100:      #E8F4FD; /* Soft sky blue cards & badges */
    --toyza-blue-50:       #F3F9FE;

    --toyza-mint-500:      #2EC4B6;
    --toyza-mint-100:      #E6FAF7; /* STEM & Eco badges */

    --toyza-yellow-500:    #FFD23F; /* Star ratings & Best Seller badges */
    --toyza-yellow-100:    #FFF9E6;

    --toyza-cream-bg:      #FFFDF9; /* Warm welcoming store background */
    --toyza-white:         #FFFFFF;
    --toyza-border:        #EDE8E3;

    /* -------------------------------------------------------------------------
       Typography Scale
    ------------------------------------------------------------------------- */
    --toyza-font-heading:  'Fredoka', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --toyza-font-body:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --toyza-fs-xs:         0.75rem;   /* 12px */
    --toyza-fs-sm:         0.875rem;  /* 14px */
    --toyza-fs-base:       1.00rem;   /* 16px */
    --toyza-fs-lg:         1.125rem;  /* 18px */
    --toyza-fs-xl:         1.25rem;   /* 20px */
    --toyza-fs-2xl:        1.50rem;   /* 24px */
    --toyza-fs-3xl:        1.875rem;  /* 30px */
    --toyza-fs-4xl:        2.25rem;   /* 36px */
    --toyza-fs-5xl:        3.00rem;   /* 48px */

    /* -------------------------------------------------------------------------
       Rounded Radii (Playful & Soft)
    ------------------------------------------------------------------------- */
    --toyza-radius-xs:     6px;
    --toyza-radius-sm:     10px;
    --toyza-radius-md:     16px;   /* Standard cards & inputs */
    --toyza-radius-lg:     22px;   /* Featured cards & category blocks */
    --toyza-radius-xl:     30px;   /* Modals & hero banners */
    --toyza-radius-full:   9999px; /* Pill buttons, badges, chips */

    /* -------------------------------------------------------------------------
       Soft Elevation Shadows
    ------------------------------------------------------------------------- */
    --toyza-shadow-subtle: 0 4px 12px rgba(30, 34, 79, 0.04);
    --toyza-shadow-card:   0 8px 24px rgba(30, 34, 79, 0.07);
    --toyza-shadow-hover:  0 14px 34px rgba(30, 34, 79, 0.12);
    --toyza-shadow-pink:   0 8px 22px rgba(255, 46, 147, 0.32);
    --toyza-shadow-drawer: -6px 0 30px rgba(18, 21, 48, 0.15);

    /* -------------------------------------------------------------------------
       Layout Breakpoints & Grid Gutters
    ------------------------------------------------------------------------- */
    --toyza-container-max: 1280px;
    --toyza-gutter:        24px;
    --toyza-header-height: 80px;
    --toyza-mobile-bar-h:  64px;
}