:root {
    --np-color-primary: #4f46e5;
    --np-color-primary-hover: #4338ca;
    --np-color-primary-active: #3730a3;
    --np-color-primary-soft: #eef2ff;
    --np-color-primary-subtle: #e0e7ff;
    --np-color-primary-rgb: 79, 70, 229;

    --np-color-sky: #38bdf8;
    --np-color-sky-hover: #0ea5e9;
    --np-color-sky-active: #0284c7;
    --np-color-sky-soft: #e0f2fe;
    --np-color-sky-subtle: #bae6fd;
    --np-color-sky-rgb: 56, 189, 248;

    --np-color-teal: #2dd4bf;
    --np-color-teal-hover: #14b8a6;
    --np-color-teal-active: #0f766e;
    --np-color-teal-soft: #ccfbf1;
    --np-color-teal-subtle: #99f6e4;
    --np-color-teal-rgb: 45, 212, 191;

    --np-color-lime: #a3e635;
    --np-color-lime-hover: #84cc16;
    --np-color-lime-active: #65a30d;
    --np-color-lime-soft: #ecfccb;
    --np-color-lime-subtle: #d9f99d;
    --np-color-lime-rgb: 163, 230, 53;

    --np-color-background: #f8fafc;
    --np-color-background-soft: #f1f5f9;
    --np-color-background-muted: #e2e8f0;
    --np-color-surface: #ffffff;
    --np-color-surface-soft: #f8fafc;
    --np-color-surface-muted: #f1f5f9;
    --np-color-surface-raised: #ffffff;
    --np-color-surface-glass: rgba(255, 255, 255, 0.76);

    --np-color-text: #334155;
    --np-color-heading: #0f172a;
    --np-color-text-muted: #64748b;
    --np-color-text-soft: #94a3b8;
    --np-color-text-inverse: #ffffff;

    --np-color-border: #cbd5e1;
    --np-color-border-soft: #e2e8f0;
    --np-color-border-strong: #94a3b8;

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

    --np-color-success: #16a34a;
    --np-color-success-hover: #15803d;
    --np-color-success-soft: #dcfce7;
    --np-color-success-rgb: 22, 163, 74;

    --np-color-danger: #dc2626;
    --np-color-danger-hover: #b91c1c;
    --np-color-danger-soft: #fee2e2;
    --np-color-danger-rgb: 220, 38, 38;

    --np-color-warning: #f59e0b;
    --np-color-warning-hover: #d97706;
    --np-color-warning-soft: #fef3c7;
    --np-color-warning-rgb: 245, 158, 11;

    --np-color-info: #2563eb;
    --np-color-info-hover: #1d4ed8;
    --np-color-info-soft: #dbeafe;
    --np-color-info-rgb: 37, 99, 235;

    --np-color-primary-dark: #334155;
    --np-color-primary-teal: #4f46e5;
    --np-color-accent-mint: #2dd4bf;
    --np-color-accent-gold: #a3e635;
    --np-color-surface-border: var(--np-color-border-soft);

    --np-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #38bdf8 100%);
    --np-gradient-primary-hover: linear-gradient(135deg, #4338ca 0%, #0ea5e9 100%);
    --np-gradient-creative: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%);
    --np-gradient-cta: linear-gradient(135deg, #a3e635 0%, #2dd4bf 100%);
    --np-gradient-soft: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    --np-gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
    --np-gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --np-gradient-hero: radial-gradient(circle at top right, rgba(79, 70, 229, 0.18) 0%, rgba(56, 189, 248, 0.1) 28%, rgba(248, 250, 252, 0) 58%), linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    --np-gradient-hero-dark: radial-gradient(circle at top right, rgba(56, 189, 248, 0.22) 0%, rgba(45, 212, 191, 0.14) 32%, rgba(15, 23, 42, 0) 62%), linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    --np-font-primary: "NouraSans", "IRANSansWebFaNum", "IRANSans", "Vazirmatn", Tahoma, Arial, sans-serif;
    --np-font-heading: "NouraHeading", "IRANYekan", "NouraSans", Tahoma, Arial, sans-serif;
    --np-font-display: "NouraDisplay", "YekanBakhFaNum", "NouraHeading", Tahoma, Arial, sans-serif;
    --np-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --np-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --np-font-size-2xs: 0.6875rem;
    --np-font-size-xs: 0.75rem;
    --np-font-size-sm: 0.875rem;
    --np-font-size-md: 1rem;
    --np-font-size-lg: 1.125rem;
    --np-font-size-xl: 1.25rem;
    --np-font-size-2xl: 1.5rem;
    --np-font-size-3xl: 1.875rem;
    --np-font-size-4xl: 2.25rem;
    --np-font-size-5xl: 3rem;
    --np-font-size-6xl: clamp(2.5rem, 6vw, 4.75rem);
    --np-font-size-7xl: clamp(3rem, 7vw, 5.75rem);

    --np-line-height-none: 1;
    --np-line-height-tight: 1.3;
    --np-line-height-snug: 1.5;
    --np-line-height-normal: 1.75;
    --np-line-height-relaxed: 1.9;

    --np-letter-spacing-tight: -0.02em;
    --np-letter-spacing-normal: 0;
    --np-letter-spacing-wide: 0.02em;

    --np-font-weight-thin: 100;
    --np-font-weight-ultralight: 200;
    --np-font-weight-light: 300;
    --np-font-weight-regular: 400;
    --np-font-weight-medium: 500;
    --np-font-weight-semibold: 600;
    --np-font-weight-bold: 700;
    --np-font-weight-extrabold: 800;
    --np-font-weight-black: 900;

    --np-spacing-0: 0;
    --np-spacing-3xs: 0.125rem;
    --np-spacing-2xs: 0.25rem;
    --np-spacing-xs: 0.5rem;
    --np-spacing-sm: 0.75rem;
    --np-spacing-md: 1rem;
    --np-spacing-lg: 1.5rem;
    --np-spacing-xl: 2rem;
    --np-spacing-2xl: 3rem;
    --np-spacing-3xl: 4rem;
    --np-spacing-4xl: 6rem;
    --np-spacing-5xl: 8rem;
    --np-spacing-6xl: 10rem;

    --np-container-xs: 720px;
    --np-container-sm: 920px;
    --np-container-md: 1120px;
    --np-container-lg: 1280px;
    --np-container-xl: 1440px;
    --np-container-2xl: 1600px;
    --np-container-width: var(--np-container-lg);
    --np-container-narrow: 820px;
    --np-container-content: 960px;
    --np-container-padding: clamp(1rem, 4vw, 2rem);

    --np-radius-none: 0;
    --np-radius-2xs: 0.1875rem;
    --np-radius-xs: 0.25rem;
    --np-radius-sm: 0.5rem;
    --np-radius-md: 0.75rem;
    --np-radius-lg: 1rem;
    --np-radius-xl: 1.25rem;
    --np-radius-2xl: 1.5rem;
    --np-radius-3xl: 2rem;
    --np-radius-pill: 999px;
    --np-radius-circle: 50%;

    --np-shadow-none: none;
    --np-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06);
    --np-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
    --np-shadow-md: 0 14px 38px rgba(15, 23, 42, 0.1);
    --np-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.14);
    --np-shadow-xl: 0 36px 100px rgba(15, 23, 42, 0.18);
    --np-shadow-primary: 0 18px 48px rgba(79, 70, 229, 0.22);
    --np-shadow-sky: 0 18px 48px rgba(56, 189, 248, 0.18);
    --np-shadow-teal: 0 18px 48px rgba(45, 212, 191, 0.18);
    --np-shadow-lime: 0 18px 48px rgba(163, 230, 53, 0.2);

    --np-blur-sm: 8px;
    --np-blur-md: 16px;
    --np-blur-lg: 24px;

    --np-border-width: 1px;
    --np-border-width-strong: 2px;
    --np-border-style: solid;
    --np-border: var(--np-border-width) var(--np-border-style) var(--np-color-border-soft);
    --np-border-strong: var(--np-border-width) var(--np-border-style) var(--np-color-border);

    --np-transition-fast: 160ms ease;
    --np-transition-md: 260ms ease;
    --np-transition-slow: 420ms ease;
    --np-transition-bounce: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --np-z-index-negative: -1;
    --np-z-index-base: 1;
    --np-z-index-content: 10;
    --np-z-index-dropdown: 50;
    --np-z-index-sticky: 100;
    --np-z-index-header: 200;
    --np-z-index-overlay: 500;
    --np-z-index-modal: 1000;
    --np-z-index-toast: 1200;

    --np-header-height: 88px;
    --np-header-height-compact: 72px;
    --np-mobile-header-height: 72px;
    --np-admin-bar-height: 32px;

    --np-button-height-xs: 2.25rem;
    --np-button-height-sm: 2.5rem;
    --np-button-height-md: 3rem;
    --np-button-height-lg: 3.5rem;
    --np-button-height-xl: 4rem;
    --np-button-padding-x-xs: 0.875rem;
    --np-button-padding-x-sm: 1rem;
    --np-button-padding-x-md: 1.25rem;
    --np-button-padding-x-lg: 1.75rem;
    --np-button-padding-x-xl: 2.25rem;
    --np-button-radius: var(--np-radius-pill);
    --np-button-font-size: var(--np-font-size-sm);
    --np-button-font-weight: var(--np-font-weight-bold);

    --np-input-height-sm: 2.75rem;
    --np-input-height: 3rem;
    --np-input-height-lg: 3.5rem;
    --np-input-padding-x: 1rem;
    --np-input-padding-y: 0.75rem;
    --np-input-background: var(--np-color-surface);
    --np-input-background-focus: var(--np-color-white);
    --np-input-border-color: var(--np-color-border-soft);
    --np-input-border-color-hover: var(--np-color-border);
    --np-input-border-color-focus: var(--np-color-primary);
    --np-input-text-color: var(--np-color-text);
    --np-input-placeholder-color: var(--np-color-text-soft);
    --np-input-radius: var(--np-radius-lg);
    --np-input-shadow-focus: 0 0 0 4px rgba(var(--np-color-primary-rgb), 0.12);

    --np-card-background: var(--np-color-surface);
    --np-card-background-soft: var(--np-color-surface-soft);
    --np-card-border-color: var(--np-color-border-soft);
    --np-card-border-color-hover: rgba(var(--np-color-primary-rgb), 0.32);
    --np-card-radius: var(--np-radius-2xl);
    --np-card-shadow: var(--np-shadow-sm);
    --np-card-shadow-hover: var(--np-shadow-md);
    --np-card-padding: var(--np-spacing-xl);

    --np-section-padding-y: clamp(3rem, 7vw, 7rem);
    --np-section-padding-x: 0;
    --np-section-gap: clamp(2rem, 5vw, 4rem);
    --np-grid-gap: clamp(1rem, 2vw, 1.5rem);

    --np-focus-outline-color: var(--np-color-teal);
    --np-focus-outline-width: 3px;
    --np-focus-outline-offset: 3px;

    --np-link-color: var(--np-color-primary);
    --np-link-color-hover: var(--np-color-sky);
    --np-selection-background: rgba(var(--np-color-primary-rgb), 0.18);
    --np-selection-color: var(--np-color-heading);

    --np-header-background: rgba(255, 255, 255, 0.86);
    --np-header-background-solid: var(--np-color-surface);
    --np-header-border-color: rgba(203, 213, 225, 0.72);
    --np-header-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
    --np-header-backdrop-filter: blur(18px);
    --np-header-text-color: var(--np-color-text);
    --np-header-link-color: var(--np-color-text);
    --np-header-link-color-hover: var(--np-color-primary);
    --np-header-action-background: var(--np-color-primary-soft);
    --np-header-action-color: var(--np-color-primary);

    --np-footer-background: #0f172a;
    --np-footer-surface: rgba(255, 255, 255, 0.06);
    --np-footer-border-color: rgba(255, 255, 255, 0.12);
    --np-footer-text-color: rgba(255, 255, 255, 0.82);
    --np-footer-heading-color: var(--np-color-white);
    --np-footer-link-color: rgba(255, 255, 255, 0.78);
    --np-footer-link-color-hover: var(--np-color-teal);

    --np-hero-background: var(--np-gradient-hero);
    --np-hero-surface: rgba(255, 255, 255, 0.78);
    --np-hero-border-color: rgba(203, 213, 225, 0.76);
    --np-hero-glow-primary: rgba(var(--np-color-primary-rgb), 0.2);
    --np-hero-glow-sky: rgba(var(--np-color-sky-rgb), 0.18);
    --np-hero-glow-teal: rgba(var(--np-color-teal-rgb), 0.18);

    --np-shop-price-color: var(--np-color-primary);
    --np-shop-sale-color: var(--np-color-danger);
    --np-shop-rating-color: #f59e0b;
    --np-shop-badge-background: var(--np-color-lime-soft);
    --np-shop-badge-color: #3f6212;
    --np-shop-card-radius: var(--np-card-radius);
    --np-shop-card-shadow: var(--np-card-shadow);

    --np-seller-color: var(--np-color-teal);
    --np-seller-color-hover: var(--np-color-teal-hover);
    --np-seller-soft: var(--np-color-teal-soft);
    --np-seller-dashboard-background: var(--np-color-background);
    --np-seller-card-background: var(--np-color-surface);
    --np-seller-sidebar-background: #0f172a;
    --np-seller-sidebar-color: rgba(255, 255, 255, 0.82);

    --np-service-color: var(--np-color-sky);
    --np-service-color-hover: var(--np-color-sky-hover);
    --np-service-soft: var(--np-color-sky-soft);
    --np-service-card-background: var(--np-color-surface);
    --np-service-card-border: rgba(var(--np-color-sky-rgb), 0.24);

    --np-cta-background: var(--np-gradient-cta);
    --np-cta-color: #1f2937;
    --np-cta-shadow: var(--np-shadow-lime);

    --np-overlay-background: rgba(15, 23, 42, 0.62);
    --np-backdrop-background: rgba(15, 23, 42, 0.5);
    --np-backdrop-filter: blur(12px);
}

[data-np-theme="dark"],
.np-theme-dark {
    --np-color-background: #0f172a;
    --np-color-background-soft: #111827;
    --np-color-background-muted: #1e293b;
    --np-color-surface: #111827;
    --np-color-surface-soft: #1e293b;
    --np-color-surface-muted: #273449;
    --np-color-surface-raised: #172033;
    --np-color-surface-glass: rgba(15, 23, 42, 0.76);

    --np-color-text: rgba(255, 255, 255, 0.82);
    --np-color-heading: #ffffff;
    --np-color-text-muted: rgba(255, 255, 255, 0.64);
    --np-color-text-soft: rgba(255, 255, 255, 0.48);
    --np-color-text-inverse: #0f172a;

    --np-color-border: rgba(255, 255, 255, 0.18);
    --np-color-border-soft: rgba(255, 255, 255, 0.1);
    --np-color-border-strong: rgba(255, 255, 255, 0.28);

    --np-card-background: rgba(255, 255, 255, 0.06);
    --np-card-background-soft: rgba(255, 255, 255, 0.04);
    --np-card-border-color: rgba(255, 255, 255, 0.1);
    --np-card-border-color-hover: rgba(var(--np-color-sky-rgb), 0.36);

    --np-input-background: rgba(255, 255, 255, 0.06);
    --np-input-background-focus: rgba(255, 255, 255, 0.08);
    --np-input-border-color: rgba(255, 255, 255, 0.12);
    --np-input-border-color-hover: rgba(255, 255, 255, 0.22);
    --np-input-text-color: rgba(255, 255, 255, 0.86);
    --np-input-placeholder-color: rgba(255, 255, 255, 0.46);

    --np-header-background: rgba(15, 23, 42, 0.82);
    --np-header-background-solid: #0f172a;
    --np-header-border-color: rgba(255, 255, 255, 0.1);
    --np-header-text-color: rgba(255, 255, 255, 0.84);
    --np-header-link-color: rgba(255, 255, 255, 0.84);
    --np-header-link-color-hover: var(--np-color-sky);
    --np-header-action-background: rgba(255, 255, 255, 0.08);
    --np-header-action-color: var(--np-color-sky);

    --np-hero-background: var(--np-gradient-hero-dark);
    --np-hero-surface: rgba(255, 255, 255, 0.06);
    --np-hero-border-color: rgba(255, 255, 255, 0.12);

    --np-shop-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

@media (max-width: 1200px) {
    :root {
        --np-container-width: var(--np-container-md);
    }
}

@media (max-width: 1024px) {
    :root {
        --np-container-width: var(--np-container-sm);
        --np-header-height: 78px;
        --np-section-padding-y: clamp(2.75rem, 6vw, 5rem);
        --np-grid-gap: 1.25rem;
    }
}

@media (max-width: 782px) {
    :root {
        --np-admin-bar-height: 46px;
        --np-header-height: var(--np-mobile-header-height);
        --np-container-padding: 1rem;
        --np-section-padding-y: 3rem;
        --np-section-gap: 2rem;
        --np-card-padding: 1.25rem;
        --np-card-radius: var(--np-radius-xl);
        --np-font-size-5xl: 2.35rem;
        --np-font-size-6xl: clamp(2.25rem, 11vw, 3.25rem);
        --np-button-height-lg: 3.25rem;
        --np-button-padding-x-lg: 1.35rem;
    }
}

@media (max-width: 480px) {
    :root {
        --np-container-padding: 0.875rem;
        --np-section-padding-y: 2.5rem;
        --np-card-padding: 1rem;
        --np-radius-2xl: 1.25rem;
        --np-font-size-4xl: 1.95rem;
        --np-font-size-5xl: 2.2rem;
        --np-button-height-md: 2.875rem;
        --np-button-height-lg: 3.125rem;
    }
}