/*
|--------------------------------------------------------------------------
| NIJEE Frontend Design System
|--------------------------------------------------------------------------
| Change NIJEE frontend colors and shared design tokens from this file.
|--------------------------------------------------------------------------
*/

:root {
    --nijee-primary: #6D28D9;
    --nijee-primary-dark: #4C1D95;
    --nijee-violet: #7C3AED;

    --nijee-pink: #EC4899;
    --nijee-coral: #FB5B67;
    --nijee-peach: #FDBA74;
    --nijee-rose: #F472B6;

    --nijee-bg: #FAFAFF;
    --nijee-background: #FAFAFF;
    --nijee-surface: #FFFFFF;
    --nijee-white: #FFFFFF;

    --nijee-lavender: #F5F3FF;
    --nijee-bg-lavender: #F5F3FF;
    --nijee-pink-bg: #FDF2F8;
    --nijee-bg-pink: #FDF2F8;
    --nijee-bg-peach: #FFF7ED;

    --nijee-text: #0F172A;
    --nijee-heading: #111827;
    --nijee-text-secondary: #64748B;
    --nijee-muted: #64748B;
    --nijee-text-muted: #94A3B8;

    --nijee-border: #E2E8F0;
    --nijee-border-light: #EEF2F7;
    --nijee-input-border: #CBD5E1;

    --nijee-success: #16A34A;
    --nijee-error: #DC2626;
    --nijee-warning: #F97316;
    --nijee-info: #2563EB;
    --nijee-rating: #F59E0B;

    --nijee-gradient:
        linear-gradient(
            135deg,
            #6D28D9 0%,
            #EC4899 55%,
            #FB5B67 100%
        );

    --nijee-hero:
        linear-gradient(
            110deg,
            #FED7AA 0%,
            #FBCFE8 48%,
            #C4B5FD 100%
        );

    --nijee-hero-gradient:
        linear-gradient(
            110deg,
            #FED7AA 0%,
            #FBCFE8 48%,
            #C4B5FD 100%
        );

    --nijee-shadow-sm:
        0 4px 14px rgba(76, 29, 149, 0.07);

    --nijee-shadow:
        0 12px 35px rgba(76, 29, 149, 0.10);

    --nijee-shadow-lg:
        0 20px 50px rgba(76, 29, 149, 0.14);

    --nijee-radius-xs: 6px;
    --nijee-radius-sm: 10px;
    --nijee-radius-md: 14px;
    --nijee-radius-lg: 20px;
    --nijee-radius-xl: 28px;
    --nijee-radius-pill: 999px;

    --nijee-space-1: 4px;
    --nijee-space-2: 8px;
    --nijee-space-3: 12px;
    --nijee-space-4: 16px;
    --nijee-space-5: 20px;
    --nijee-space-6: 24px;
    --nijee-space-8: 32px;
    --nijee-space-10: 40px;
    --nijee-space-12: 48px;

    --nijee-container-width: 1440px;
    --nijee-touch-target: 44px;
    --nijee-transition: 180ms ease;

    --nijee-product-image-ratio: 1 / 1;
    --nijee-product-title-lines: 2;
    --nijee-cart-button-min-width: 132px;
}

/* =========================================================
   NIJEE FRONTEND V2 FOUNDATION
   ========================================================= */

:root {
    --nijee-primary: #8B5CF6;
    --nijee-primary-dark: #6D28D9;
    --nijee-primary-soft: #F3E8FF;

    --nijee-accent: #EC4899;
    --nijee-accent-dark: #DB2777;
    --nijee-accent-soft: #FCE7F3;

    --nijee-gradient:
        linear-gradient(
            135deg,
            #8B5CF6 0%,
            #A855F7 48%,
            #EC4899 100%
        );

    --nijee-bg: #FFF7FB;
    --nijee-bg-soft: #FAF5FF;
    --nijee-surface: #FFFFFF;
    --nijee-surface-alt: #FDFBFF;

    --nijee-text: #1F1235;
    --nijee-text-soft: #6B5B7A;
    --nijee-muted: #9B8AA8;

    --nijee-border: #EADCF3;
    --nijee-border-soft: #F3E8F7;

    --nijee-success: #16A34A;
    --nijee-warning: #F59E0B;
    --nijee-danger: #DC2626;

    --nijee-radius-sm: 8px;
    --nijee-radius-md: 12px;
    --nijee-radius-lg: 16px;
    --nijee-radius-xl: 22px;
    --nijee-radius-pill: 999px;

    --nijee-shadow-sm:
        0 2px 10px rgba(77, 35, 108, 0.06);

    --nijee-shadow-md:
        0 8px 24px rgba(77, 35, 108, 0.09);

    --nijee-shadow-lg:
        0 18px 50px rgba(77, 35, 108, 0.13);

    --nijee-transition:
        180ms ease;
}

/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--nijee-bg);
    color: var(--nijee-text);
    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition:
        color var(--nijee-transition),
        background-color var(--nijee-transition),
        border-color var(--nijee-transition),
        box-shadow var(--nijee-transition),
        transform var(--nijee-transition);
}

/* ---------------------------------------------------------
   CONTAINERS
   --------------------------------------------------------- */

.container,
.container-fluid {
    --nijee-container-gap: 16px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

@media (max-width: 767px) {
    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ---------------------------------------------------------
   SECTION SYSTEM
   --------------------------------------------------------- */

.nijee-section {
    padding: 32px 0;
}

.nijee-section-sm {
    padding: 20px 0;
}

.nijee-section-lg {
    padding: 48px 0;
}

.nijee-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.nijee-section-title {
    margin: 0;
    color: var(--nijee-text);
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
}

.nijee-section-subtitle {
    margin-top: 5px;
    color: var(--nijee-text-soft);
    font-size: 14px;
}

/* ---------------------------------------------------------
   SURFACES / CARDS
   --------------------------------------------------------- */

.nijee-card {
    background: var(--nijee-surface);
    border: 1px solid var(--nijee-border-soft);
    border-radius: var(--nijee-radius-lg);
    box-shadow: var(--nijee-shadow-sm);
    transition:
        transform var(--nijee-transition),
        box-shadow var(--nijee-transition),
        border-color var(--nijee-transition);
}

.nijee-card:hover {
    transform: translateY(-2px);
    border-color: var(--nijee-border);
    box-shadow: var(--nijee-shadow-md);
}

/* ---------------------------------------------------------
   BUTTON SYSTEM
   --------------------------------------------------------- */

.nijee-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--nijee-radius-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.nijee-btn-primary {
    background: var(--nijee-gradient);
    color: #FFFFFF;
    box-shadow:
        0 7px 18px rgba(168, 85, 247, 0.22);
}

.nijee-btn-primary:hover {
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(168, 85, 247, 0.3);
}

.nijee-btn-secondary {
    background: #FFFFFF;
    color: var(--nijee-primary-dark);
    border-color: var(--nijee-border);
}

.nijee-btn-secondary:hover {
    background: var(--nijee-primary-soft);
    color: var(--nijee-primary-dark);
}

/* ---------------------------------------------------------
   INPUT SYSTEM
   --------------------------------------------------------- */

.nijee-input,
.form-control {
    border-color: var(--nijee-border);
    border-radius: var(--nijee-radius-md);
    transition:
        border-color var(--nijee-transition),
        box-shadow var(--nijee-transition);
}

.nijee-input:focus,
.form-control:focus {
    border-color: var(--nijee-primary);
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */

.nijee-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: var(--nijee-radius-pill);
    background: var(--nijee-accent-soft);
    color: var(--nijee-accent-dark);
    font-size: 12px;
    font-weight: 700;
}

/* ---------------------------------------------------------
   PRICE SYSTEM
   --------------------------------------------------------- */

.nijee-price {
    color: var(--nijee-text);
    font-weight: 800;
}

.nijee-price-old {
    color: var(--nijee-muted);
    text-decoration: line-through;
}

.nijee-discount {
    color: var(--nijee-success);
    font-weight: 700;
}

/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #F7EFFA;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #C084FC,
            #EC4899
        );
    border-radius: var(--nijee-radius-pill);
    border: 2px solid #F7EFFA;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
    .nijee-section {
        padding: 22px 0;
    }

    .nijee-section-lg {
        padding: 30px 0;
    }

    .nijee-section-heading {
        margin-bottom: 14px;
    }

    .nijee-section-title {
        font-size: 21px;
    }

    .nijee-card {
        border-radius: 14px;
    }
}