:root {
    /* 5-Color Theme System */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --accent: #045f9c;

    /* Legacy Aliases (pointing to the 5 core tokens) */
    --bg-color: var(--bg-page);
    --card-bg: var(--bg-card);
    --accent-blue: var(--accent);

    /* Derived colors */
    --border-light: color-mix(in srgb, var(--text-main) 20%, transparent);
    --nav-link-color: var(--text-muted);
    --nav-hover-bg: color-mix(in srgb, var(--text-muted) 10%, transparent);
    --nav-active-bg: color-mix(in srgb, var(--accent) 15%, transparent);
    --nav-tabs-bg: color-mix(in srgb, var(--bg-card) 90%, transparent);
    
    /* Interactive Card States */
    --hover-bg: color-mix(in srgb, var(--text-muted) 8%, var(--bg-card));
    --selected-bg: color-mix(in srgb, var(--text-muted) 8%, var(--bg-card));
    --bg-image-opacity: 0.015;
}

:root[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --text-main: #c5d0dc;
    --text-muted: #94a3b8;
    --accent: #0470b8;
    --bg-image-opacity: 0.015;
}

/* Work Style Tags conforming to the site's DNA color scheme */
.tag-remote,
.tag-hybrid,
.tag-onsite {
    background: var(--bg-page) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
}