/* Core palette tokens.
   Change the site palette here first; legacy aliases below inherit these values. */
:root {
    --color-header: #0d1822;
    --color-header-2: #17293a;
    --color-header-3: #24394b;
    --color-text: #112234;
    --color-muted: #586f82;
    --color-bg: #f4f8fb;
    --color-bg-2: #e8f1f6;
    --color-surface: #ffffff;
    --color-card: rgba(255, 255, 255, 0.96);
    --color-line: rgba(17, 34, 52, 0.14);
    --color-line-strong: rgba(17, 34, 52, 0.22);
    --color-accent: #d97825;
    --color-accent-hover: #b95f19;
    --color-accent-soft: #fff0e2;
    --color-accent-warm: #f2b168;
    --color-steel: #287a9f;
    --color-steel-soft: #e5f3f8;
    --color-white: #ffffff;
    --shadow-soft: 0 12px 34px rgba(17, 34, 52, 0.09);
    --shadow-strong: 0 22px 56px rgba(17, 34, 52, 0.15);

    --brand-carbon: var(--color-header);
    --brand-carbon-2: var(--color-header-2);
    --brand-carbon-3: var(--color-header-3);
    --brand-blue: var(--color-accent);
    --brand-blue-strong: var(--color-accent-hover);
    --brand-blue-soft: var(--color-accent-soft);
    --brand-copper: var(--color-accent);
    --brand-copper-strong: var(--color-accent-hover);
    --brand-copper-soft: var(--color-accent-soft);
    --brand-paper: var(--color-surface);
    --brand-surface: var(--color-bg);
    --brand-surface-2: var(--color-bg-2);
    --brand-line: var(--color-line);
    --brand-line-strong: var(--color-line-strong);
    --brand-text: var(--color-text);
    --brand-muted: var(--color-muted);
    --brand-shadow: var(--shadow-soft);
    --brand-shadow-strong: var(--shadow-strong);

    --ez-ink: var(--color-header);
    --ez-ink-2: var(--color-header-2);
    --ez-text: var(--color-text);
    --ez-muted: var(--color-muted);
    --ez-accent: var(--color-accent);
    --ez-teal: var(--color-steel);
    --ez-gold: var(--color-accent-warm);
    --ez-surface: var(--color-bg);
    --ez-line: rgba(255, 255, 255, 0.24);
    --ez-line-dark: var(--color-line);

    --site-ink: var(--color-text);
    --site-ink-soft: var(--color-header-3);
    --site-muted: var(--color-muted);
    --site-line: var(--color-line);
    --site-surface: var(--color-bg);
    --site-card: var(--color-card);
    --site-accent: var(--color-accent);
    --site-accent-strong: var(--color-accent-hover);
    --site-green: var(--color-steel);
    --site-success: #10643a;
    --site-success-soft: #f2fff8;
    --site-success-line: #8fcaad;
    --site-danger: #9d1f1f;
    --site-danger-line: #e0b2b2;
    --site-header-glass: rgba(13, 24, 34, 0.94);
    --site-header-fixed: rgba(13, 24, 34, 0.96);

    --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);
}