/* Core color tokens */
:root {
    --brand-carbon: #101820;
    --brand-carbon-2: #182736;
    --brand-carbon-3: #223548;
    --brand-blue: #c7742d;
    --brand-blue-strong: #a95c1a;
    --brand-blue-soft: #f7ede4;
    --brand-copper: #c7742d;
    --brand-copper-strong: #a95c1a;
    --brand-paper: #ffffff;
    --brand-surface: #f5f7f8;
    --brand-surface-2: #ebf0f3;
    --brand-line: rgba(16, 24, 32, 0.14);
    --brand-text: #142231;
    --brand-muted: #607283;

    --background-light: var(--brand-surface);
    --header-background: var(--brand-carbon);
    --primary-blue: var(--brand-text);
    --secondary-blue: var(--brand-copper);
    --hover-blue: var(--brand-copper-strong);
    --dark-grey: var(--brand-carbon-2);
    --light-grey: var(--brand-surface-2);
    --card-background: var(--brand-paper);
    --footer-background: var(--brand-carbon);
    --text-primary: var(--brand-text);
    --text-secondary: var(--brand-muted);
    --white: #ffffff;
}

.logo-icon {
    filter: grayscale(50%);
}

header .container {
    background-color: var(--background-light);
}

.logo,
.nav-list li,
.nav-item,
.sidebar-nav {
    color: var(--primary-blue);
}

.nav-list,
.top-header,
.fixed-menu,
.nav-container.menu-collapsed,
.company-name2,
.footer {
    background-color: var(--header-background);
}

.sidebar {
    background-color: var(--dark-grey);
}

.search-icon,
.close-btn,
.sub-menu li a::before {
    color: var(--secondary-blue);
}

.direction-item {
    background-color: var(--card-background);
    color: var(--text-primary);
}

.subcategories {
    background-color: var(--footer-background);
    color: var(--text-secondary);
}

.production-image {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-left,
.info-item {
    color: var(--text-primary);
}

.header-left .logo-icon {
    filter: grayscale(50%);
}

.header-right,
.info-row {
    color: var(--text-secondary);
}

.nav-container.menu-collapsed .menu-toggle,
.company-name2 {
    color: var(--white);
}

.company-logos a img {
    filter: grayscale(50%);
    transition: transform 0.3s, filter 0.3s;
}

.company-logos a img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}