/*
Theme Name: Flavstart
Theme URI: https://flavstart.com
Author: Flavstart Team
Author URI: https://flavstart.com
Description: A premium Etsy-inspired WooCommerce marketplace theme for handmade, vintage, craft, and artisan products. Features multi-vendor compatibility (Dokan, WCFM, MultiVendorX), AJAX-powered search and filtering, wishlist system, seller storefronts, and mobile-first responsive design.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flavstart
Tags: e-commerce, woocommerce, marketplace, multi-vendor, handmade, artisan, custom-colors, custom-logo, featured-images, full-width-template, theme-options, translation-ready
WooCommerce tested up to: 9.6
*/

/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================================ */
:root {
    /* ── Brand Colors ── */
    --fs-primary:          #F1641E;
    --fs-primary-hover:    #D9551A;
    --fs-primary-light:    #FEF0E8;
    --fs-primary-dark:     #B84A12;

    --fs-secondary:        #222222;
    --fs-secondary-hover:  #333333;
    --fs-secondary-light:  #555555;

    --fs-accent:           #A855F7;
    --fs-accent-hover:     #9333EA;
    --fs-accent-light:     #F3E8FF;

    /* ── Neutrals ── */
    --fs-white:            #FFFFFF;
    --fs-cream:            #FDEBD2;
    --fs-cream-light:      #FFF8F0;
    --fs-gray-50:          #FAFAFA;
    --fs-gray-100:         #F5F5F5;
    --fs-gray-200:         #E5E5E5;
    --fs-gray-300:         #D4D4D4;
    --fs-gray-400:         #A3A3A3;
    --fs-gray-500:         #737373;
    --fs-gray-600:         #525252;
    --fs-gray-700:         #404040;
    --fs-gray-800:         #262626;
    --fs-gray-900:         #171717;
    --fs-black:            #000000;

    /* ── Semantic Colors ── */
    --fs-success:          #16A34A;
    --fs-success-light:    #DCFCE7;
    --fs-error:            #DC2626;
    --fs-error-light:      #FEE2E2;
    --fs-warning:          #F59E0B;
    --fs-warning-light:    #FEF3C7;
    --fs-info:             #3B82F6;
    --fs-info-light:       #DBEAFE;

    /* ── Star Rating ── */
    --fs-star-filled:      #F59E0B;
    --fs-star-empty:       #D4D4D4;

    /* ── Typography ── */
    --fs-font-heading:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-font-mono:        'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes — Fluid Scale */
    --fs-text-xs:          0.75rem;     /* 12px */
    --fs-text-sm:          0.875rem;    /* 14px */
    --fs-text-base:        1rem;        /* 16px */
    --fs-text-md:          1.125rem;    /* 18px */
    --fs-text-lg:          1.25rem;     /* 20px */
    --fs-text-xl:          1.5rem;      /* 24px */
    --fs-text-2xl:         1.875rem;    /* 30px */
    --fs-text-3xl:         2.25rem;     /* 36px */
    --fs-text-4xl:         3rem;        /* 48px */
    --fs-text-5xl:         3.75rem;     /* 60px */

    /* Font Weights */
    --fs-font-light:       300;
    --fs-font-normal:      400;
    --fs-font-medium:      500;
    --fs-font-semibold:    600;
    --fs-font-bold:        700;
    --fs-font-extrabold:   800;

    /* Line Heights */
    --fs-leading-none:     1;
    --fs-leading-tight:    1.25;
    --fs-leading-snug:     1.375;
    --fs-leading-normal:   1.5;
    --fs-leading-relaxed:  1.625;
    --fs-leading-loose:    2;

    /* ── Spacing Scale ── */
    --fs-space-0:          0;
    --fs-space-1:          0.25rem;     /* 4px */
    --fs-space-2:          0.5rem;      /* 8px */
    --fs-space-3:          0.75rem;     /* 12px */
    --fs-space-4:          1rem;        /* 16px */
    --fs-space-5:          1.25rem;     /* 20px */
    --fs-space-6:          1.5rem;      /* 24px */
    --fs-space-8:          2rem;        /* 32px */
    --fs-space-10:         2.5rem;      /* 40px */
    --fs-space-12:         3rem;        /* 48px */
    --fs-space-16:         4rem;        /* 64px */
    --fs-space-20:         5rem;        /* 80px */
    --fs-space-24:         6rem;        /* 96px */

    /* ── Border Radius ── */
    --fs-radius-sm:        4px;
    --fs-radius-md:        8px;
    --fs-radius-lg:        12px;
    --fs-radius-xl:        16px;
    --fs-radius-2xl:       24px;
    --fs-radius-full:      9999px;

    /* ── Shadows (Elevation System) ── */
    --fs-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
    --fs-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --fs-shadow-md:        0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --fs-shadow-lg:        0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --fs-shadow-xl:        0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
    --fs-shadow-2xl:       0 25px 50px rgba(0, 0, 0, 0.15);
    --fs-shadow-inner:     inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ── Transitions ── */
    --fs-transition-fast:      150ms ease;
    --fs-transition-normal:    300ms ease;
    --fs-transition-slow:      500ms ease;
    --fs-transition-bounce:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ── */
    --fs-z-dropdown:       10;
    --fs-z-sticky:         20;
    --fs-z-fixed:          30;
    --fs-z-overlay:        40;
    --fs-z-modal:          50;
    --fs-z-toast:          60;

    /* ── Layout ── */
    --fs-container-sm:     640px;
    --fs-container-md:     768px;
    --fs-container-lg:     1024px;
    --fs-container-xl:     1280px;
    --fs-container-2xl:    1440px;
    --fs-container-padding: var(--fs-space-4);

    /* ── Header Heights ── */
    --fs-announcement-height:   40px;
    --fs-header-height:         72px;
    --fs-sticky-header-height:  60px;
    --fs-mobile-bottom-nav:     64px;
}

/* ── Dark Mode Overrides (future-ready) ── */
@media (prefers-color-scheme: dark) {
    :root {
        --fs-bg-primary:    #0F0F0F;
        --fs-bg-secondary:  #1A1A1A;
        --fs-bg-tertiary:   #262626;
        --fs-text-primary:  #FAFAFA;
        --fs-text-secondary:#A3A3A3;
    }
}