/**
 * Shared layout tokens — uses global tokens from dark-mode-variables.css
 */
:root {
    --accent-color: var(--theme-700, #004eeb);
    --sidebar-active-bg: var(--primary, var(--theme-700, #004eeb));
    --pos-sidebar-text-hover: var(--text-on-primary, #ffffff);
    --header-bg: linear-gradient(to right, var(--theme-800, #1e40af), var(--theme-900, #1e3a8a));
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.35);
    --layout-transition: 0.3s ease;
    --sidebar-menu-gutter: 0.75rem;
    --sidebar-item-px: 0.75rem;
    --sidebar-item-py: 0.375rem;
    --sidebar-icon-size: 1.25rem;
    --sidebar-item-gap: 0.625rem;
    --sidebar-item-min-h: 2.5rem;
    --sidebar-child-indent: calc(var(--sidebar-item-px) + var(--sidebar-icon-size) + var(--sidebar-item-gap));
    --sidebar-rail-left: calc(var(--sidebar-item-px) + var(--sidebar-icon-size) / 2);
}

body.dark-mode {
    --sidebar-active-bg: color-mix(in srgb, #ffffff 26%, var(--sidebar-bg, var(--bg-sidebar, #13161f)));
    --pos-sidebar-text-hover: #ffffff;
}

body.layout-transition #side-bar,
body.layout-transition .app-header-toolbar,
body.layout-transition #dashboard-root .dashboard-kpi-grid > div,
body.layout-transition .dashboard-charts-grid > div {
    transition: background var(--layout-transition), box-shadow var(--layout-transition),
        border-color var(--layout-transition), width var(--layout-transition),
        padding var(--layout-transition), transform var(--layout-transition);
}