/* ==========================================================
   Chatpata Club Smart Order
   File : variables.css
   Description : Global Design System
   ========================================================== */

:root {

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

    --color-primary: #ff6b00;
    --color-primary-dark: #e65f00;
    --color-primary-light: #ffefe5;

    --color-secondary: #2563eb;
    --color-secondary-dark: #1d4ed8;

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

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

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

    --color-bg: #f5f7fa;
    --color-surface: #ffffff;

    --color-border: #e5e7eb;

    --color-text: #1f2937;
    --color-text-light: #6b7280;

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

    --header-height: 72px;

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

    --sidebar-width: 240px;

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

    --card-radius: 18px;

    --card-padding: 18px;

    --card-shadow:

        0 10px 30px rgba(0,0,0,0.06);

    --card-shadow-hover:

        0 18px 40px rgba(0,0,0,0.10);

    /* ======================================================
       BUTTON
       ====================================================== */

    --button-height: 44px;

    --button-radius: 12px;

    /* ======================================================
       INPUT
       ====================================================== */

    --input-height: 46px;

    --input-radius: 10px;

    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --font-family:

        "Poppins",
        sans-serif;

    --font-size-xs: 12px;

    --font-size-sm: 14px;

    --font-size-md: 16px;

    --font-size-lg: 18px;

    --font-size-xl: 24px;

    --font-size-xxl: 34px;

    --font-weight-light: 300;

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

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

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    /* ======================================================
       GRID
       ====================================================== */

    --container-width: 1400px;

    --grid-gap: 24px;

    /* ======================================================
       PRODUCT IMAGE
       ====================================================== */

    --product-image-height: 220px;

    /* ======================================================
       CATEGORY
       ====================================================== */

    --category-height: 48px;

    /* ======================================================
       CART
       ====================================================== */

    --cart-width: 420px;

    --floating-cart-width: 260px;

    /* ======================================================
       MODAL
       ====================================================== */

    --modal-width: 650px;

    --overlay:

        rgba(0,0,0,.45);

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

    --border:

        1px solid var(--color-border);

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

    --transition-fast:

        .20s ease;

    --transition-normal:

        .35s ease;

    --transition-slow:

        .55s ease;

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

    --shadow-sm:

        0 2px 6px rgba(0,0,0,.08);

    --shadow-md:

        0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:

        0 20px 40px rgba(0,0,0,.12);

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

    --z-header: 100;

    --z-floating-cart: 500;

    --z-cart: 900;

    --z-modal: 1000;

    --z-toast: 1200;

    --z-loader: 1500;

}

/* ==========================================================
   DARK THEME (Future Ready)
   ========================================================== */

[data-theme="dark"] {

    --color-bg: #111827;

    --color-surface: #1f2937;

    --color-border: #374151;

    --color-text: #f3f4f6;

    --color-text-light: #9ca3af;

}

/* ==========================================================
   COMMON GRADIENTS
   ========================================================== */

:root {

    --gradient-primary:

        linear-gradient(
            135deg,
            #ff6b00,
            #ff8f3d
        );

    --gradient-secondary:

        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    --gradient-success:

        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

}

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

:root {

    --radius-sm: 6px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 28px;

    --radius-round: 999px;

}