/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/core/variables.css
    Description: Global Design Tokens
==========================================================*/

:root{

    /*======================================================
        BRAND COLORS
    ======================================================*/

    --color-primary: #0b5ed7;
    --color-primary-dark: #094db1;
    --color-primary-light: #d9e8ff;

    --color-secondary: #ff6b00;
    --color-secondary-dark: #e65f00;
    --color-secondary-light: #fff0e5;

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    --color-info: #0ea5e9;

    /*======================================================
        NEUTRAL COLORS
    ======================================================*/

    --white: #ffffff;
    --black: #000000;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /*======================================================
        BACKGROUNDS
    ======================================================*/

    --body-bg: #f5f7fa;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --card-bg: #ffffff;
    --footer-bg: #111827;
    --sidebar-bg: #ffffff;

    /*======================================================
        TEXT
    ======================================================*/

    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;

    /*======================================================
        BORDERS
    ======================================================*/

    --border-color: #e5e7eb;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;

    /*======================================================
        LINKS
    ======================================================*/

    --link: var(--color-primary);
    --link-hover: var(--color-primary-dark);

    /*======================================================
        FONTS
    ======================================================*/

    --font-primary:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-heading:
        "Poppins",
        "Segoe UI",
        sans-serif;

    --font-mono:
        "Consolas",
        monospace;

    /*======================================================
        FONT SIZES
    ======================================================*/

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;

    /*======================================================
        FONT WEIGHTS
    ======================================================*/

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /*======================================================
        LINE HEIGHTS
    ======================================================*/

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.8;

    /*======================================================
        LETTER SPACING
    ======================================================*/

    --tracking-tight: -.03em;
    --tracking-normal: 0;
    --tracking-wide: .05em;

    /*======================================================
        SPACING SCALE
    ======================================================*/

    --space-0: 0;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /*======================================================
        BORDER RADIUS
    ======================================================*/

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-round: 9999px;

    /*======================================================
        SHADOWS
    ======================================================*/

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.05);

    --shadow-sm:
        0 2px 4px rgba(0,0,0,.06);

    --shadow-md:
        0 6px 12px rgba(0,0,0,.08);

    --shadow-lg:
        0 10px 25px rgba(0,0,0,.12);

    --shadow-xl:
        0 20px 40px rgba(0,0,0,.15);

    --shadow-card:
        0 2px 10px rgba(0,0,0,.08);

    --shadow-hover:
        0 10px 30px rgba(0,0,0,.12);

    /*======================================================
        TRANSITIONS
    ======================================================*/

    --transition-fast: .15s ease;
    --transition-normal: .3s ease;
    --transition-slow: .5s ease;

    /*======================================================
        ANIMATION DURATIONS
    ======================================================*/

    --animation-fast: .2s;
    --animation-normal: .4s;
    --animation-slow: .7s;
    --animation-extra: 1s;

    /*======================================================
        OPACITY
    ======================================================*/

    --opacity-disabled: .45;
    --opacity-muted: .7;
    --opacity-overlay: .9;

    /*======================================================
        CONTAINERS
    ======================================================*/

    --container-xs: 540px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1140px;
    --container-xl: 1320px;
    --container-2xl: 1440px;
    --container-full: 1600px;

    /*======================================================
        HEADER HEIGHTS
    ======================================================*/

    --topbar-height: 36px;
    --header-height: 80px;
    --mobile-header-height: 65px;
    --search-height: 48px;
    --navbar-height: 54px;

    /*======================================================
        SIDEBAR
    ======================================================*/

    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;

    /*======================================================
        PRODUCT CARD
    ======================================================*/

    --product-card-width: 220px;
    --product-image-height: 220px;
    --category-card-height: 160px;

    /*======================================================
        Z-INDEX
    ======================================================*/

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-offcanvas: 1040;
    --z-overlay: 1050;
    --z-modal: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-loader: 1090;

    /*======================================================
        BREAKPOINTS
    ======================================================*/

    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /*======================================================
        MARKETPLACE SETTINGS
    ======================================================*/

    --hero-height: 420px;
    --banner-radius: var(--radius-lg);
    --card-radius: var(--radius-md);
    --button-radius: var(--radius-sm);

    --product-gap: 20px;
    --section-gap: 60px;

    --header-blur: blur(12px);
}