:root {
    --color-bg-primary: #f3f4f6;
    --color-bg-secondary: #fff;
    --color-bg-footer: #04325F;

    --color-text-h-footer: #fff;
    --color-text-footer: #d1d5db;

    --color-border-input: #d1d5db;
    --color-border-input-shadow: rgba(209, 213, 219, 0.4);
    --color-placeholder-input: #6b7280;
    --color-input-text: #374151;
    --color-background-input: #fff;

    --color-card-shadow-base: rgba(0, 0, 0, 0.05);
    --color-card-shadow-raised: rgba(0, 0, 0, 0.1);

    --color-form-border: #e5e7eb;

    /* ----------------------------------------------------- */

    --color-accent: #f39100;
    --color-accent-hover: #d97f00;

    --color-link-hover: #d97f00;

    --color-cart-badge-header-bg: #ef4444;
    --color-cart-badge-header-text: #ffffff;

    --color-border-footer: #282828;
    --color-link-footer: #f39100;
    --color-link-footer-hover: #ffab2e;

    --color-button-primary-bg: #f39100;
    --color-button-primary-hover: #d97f00;
    --color-button-primary-text: #ffffff;

    --color-cookie-bg: #1f2937;
    --color-cookie-border: #374151;
    --color-cookie-text: #d1d5db;
    --color-cookie-link-hover: #ffab2e;
    --color-cookie-icon: #9ca3af;
    --color-cookie-icon-hover-bg: #374151;
    --color-cookie-icon-hover: #ffffff;

    --shadow-cookie: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);

    /* ----------------------------------------------------- */

    --color-button-secondary-bg: #e5e7eb;
    --color-button-secondary-hover: #d1d5db;
    --color-button-secondary-text: #374151;

    --color-sendform-notice-bg: #fefce8;
    --color-sendform-notice-border: #fde68a;
    --color-sendform-notice-text: #1f2937;

    --color-button-transp-bg: #ffffff;
    --color-button-transp-text: #111827;
    --color-button-transp-border: #e5e7eb;
    --color-button-transp-hover-bg: #f3f4f6;

    --color-button-transp-secondary-bg: #fff;
    --color-button-transp-secondary-text: #dc2626;
    --color-button-transp-secondary-border: #e5e7eb;
    --color-button-transp-secondary-hover: #fee2e2;
    --color-button-transp-secondary-hover-text: #b91c1c;

    --color-button-cart-bg: #f3f4f6;
    --color-button-cart-hover-bg: #e5e7eb;
    --color-button-cart-text: #374151;

    --color-text-strong: #1f2937;
    --color-text: #374151;
    --color-text-muted: #4b5563;
    --color-text-muted-light: #6b7280;

    --color-image-wrapper-bg: #f3f4f6;

    --color-details-product-stock: #10b981;

    --color-warning-bg: #fefce8;
    --color-warning-border: #fde68a;
    --color-warning-border-bottom: #fde68a;
    --color-warning-text-h1: #1f2937;
    --color-warning-text-p: #4b5563;

    --color-border-details-header: #d1d5db;
    --color-text-details: #111827;
    --color-details-row-border: #f3f4f6;

    --color-dropdown-hover: #f3f4f6;

    --color-text-cart: #111827;
    --color-table-cart-header: #f9fafb;

    --color-carousel-dot: rgba(120, 130, 145, 0.45);
    --color-carousel-dot-hover: rgba(120, 130, 145, 0.7);
    --color-carousel-nav-btn: rgba(255, 255, 255, 0.9);
    --color-text-carousel-description: #4b5563;
    --shadow-carousel-nav: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --color-badge-new-bg: rgba(17, 24, 39, 0.85);
    --color-badge-new-text: rgba(255, 255, 255, 0.92);

    /* --------------------gradient navbar------------------------- */
    --color-navbar-grad-from: #2E4F7E;
    --color-navbar-grad-mid: #5E88BB;
    --color-navbar-grad-to: #4F6F9C;

    --transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar {
    --color-button-primary-bg: #04325F;
    --color-button-primary-hover: #06407A;
}


:root[data-theme="dark"] {
    --color-bg-primary: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-footer: #030712;

    --color-text-h-footer: #f3f4f6;
    --color-text-footer: #9ca3af;

    --color-border-input: #4b5563;
    --color-border-input-shadow: rgba(96, 165, 250, 0.5);
    --color-placeholder-input: #9ca3af;
    --color-input-text: #d1d5db;
    --color-background-input: #364153;

    --color-card-shadow-base: rgba(0, 0, 0, 0.35);
    --color-card-shadow-raised: rgba(0, 0, 0, 0.55);

    --color-form-border: #374151;

    --color-button-secondary-bg: #374151;
    --color-button-secondary-hover: #4b5563;
    --color-button-secondary-text: #d1d5db;

    --color-button-transp-bg: #1f2937;
    --color-button-transp-text: #f3f4f6;
    --color-button-transp-border: #1f2937;
    --color-button-transp-hover-bg: #111827;

    --color-button-transp-secondary-bg: #1f2937;
    --color-button-transp-secondary-text: #ff6467;
    --color-button-transp-secondary-border: #1f2937;
    --color-button-transp-secondary-hover: #111827;
    --color-button-transp-secondary-hover-text: #fb2c36;

    --color-button-cart-bg: #374151;
    --color-button-cart-hover-bg: #4b5563;
    --color-button-cart-text: #d1d5db;

    --color-text-strong: #f3f4f6;
    --color-text: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-muted-light: #9ca3af;

    --color-image-wrapper-bg: #374151;

    --color-warning-bg: rgba(113, 63, 18, 0.2);
    --color-warning-border: #854d0e;
    --color-warning-border-bottom: #854d0e;
    --color-warning-text-h1: #f3f4f6;
    --color-warning-text-p: #d1d5db;

    --color-border-details-header: #374151;
    --color-text-details: #f3f4f6;
    --color-details-row-border: #374151;

    --color-dropdown-hover: #364153;

    --color-text-cart: #f3f4f6;
    --color-table-cart-header: #374151;

    --color-carousel-dot: rgba(75, 85, 99, 0.6);
    --color-carousel-dot-hover: rgba(75, 85, 99, 1);
    --color-carousel-nav-btn: rgba(31, 41, 55, 0.9);
    --color-text-carousel-description: #d1d5db;
}



:root[data-theme="dark"] .navbar {
    --color-button-primary-bg: #04325F;
    --color-button-primary-hover: #06407A;
}