/* Shared navigation for every role: ice-blue surfaces and readable blue text. */
:root[data-workspace-theme]
    [data-slot='sidebar-content']
    [data-slot='sidebar-menu-button'] {
    --nav-bg: #e6f8ff;
    --nav-fg: #214b63;
    background: var(--nav-bg);
    color: var(--nav-fg);
    border-color: #c6e5f1;
}

:root[data-workspace-theme]
    [data-slot='sidebar-content']
    [data-slot='sidebar-menu-button']:hover {
    background: #d5f0fc;
    color: var(--nav-fg);
    border-color: #99cfe4;
}

:root[data-workspace-theme]
    [data-slot='sidebar-content']
    [data-slot='sidebar-menu-button'][data-active='true'] {
    background: #c5eafb;
    color: #123b52;
    border-color: #81c4df;
    box-shadow:
        inset 3px 0 0 #287997,
        0 2px 8px rgb(33 75 99 / 8%);
    font-weight: 700;
}

:root[data-workspace-theme]
    [data-slot='sidebar-content']
    [data-slot='sidebar-menu-button']:focus-visible {
    outline: 2px solid #287997;
    outline-offset: 2px;
}

:root[data-workspace-theme]
    [data-slot='sidebar-group-label'] {
    color: #47677c;
}

/* Match primary actions, including buttons rendered in popup portals. */
:root[data-workspace-theme]
    [data-slot='button']:is(
        [class~='bg-primary'],
        [class~='bg-blue-600'],
        [class~='bg-indigo-600'],
        [class~='bg-violet-600'],
        [class~='bg-purple-600'],
        [class~='bg-emerald-500'],
        [class~='bg-emerald-600'],
        [class~='bg-emerald-700'],
        [class~='bg-emerald-800'],
        [class~='bg-emerald-900'],
        [class~='bg-green-500'],
        [class~='bg-green-600'],
        [class~='bg-green-700'],
        [class~='bg-green-800'],
        [class~='bg-green-900'],
        [class~='bg-teal-500'],
        [class~='bg-teal-600'],
        [class~='bg-teal-700'],
        [class~='bg-teal-800'],
        [class~='bg-teal-900']
    ) {
    --workspace-action-bg: #e6f8ff;
    --workspace-action-fg: #214b63;
    --ring: #287997;
    background: var(--workspace-action-bg);
    color: var(--workspace-action-fg);
    border: 1px solid #b8ddeb;
    box-shadow: 0 1px 3px rgb(33 75 99 / 8%);

    &:hover:not(:disabled):not([aria-disabled='true']) {
        background: #d5f0fc;
        color: var(--workspace-action-fg);
        border-color: #99cfe4;
    }

    &:is(:active, [aria-pressed='true'], [data-state='active']) {
        background: #c5eafb;
        color: #123b52;
        border-color: #81c4df;
    }

    &:focus-visible {
        outline: 2px solid #287997;
        outline-offset: 2px;
    }
}