:root {
    /* Core Palette */
    --primary: #6366f1; /* Indigo */
    --primary-dark: #4f46e5;
    --secondary: #64748b; /* Slate */
    --success: #10b981; /* Emerald */
    --danger: #ef4444; /* Red */
    --warning: #f59e0b; /* Amber */
    --info: #3b82f6; /* Blue */

    /* Layout Colors */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #000000;
    --bg-sidebar-hover: #111111;
    --bg-sidebar-active: #222222;

    /* Text Colors */
    --text-primary: #1e293b; /* Slate 800 */
    --text-secondary: #475569; /* Slate 600 */
    --text-muted: #94a3b8; /* Slate 400 */
    --text-on-dark: #f8fafc; /* Slate 50 */
    --text-on-dark-muted: #cbd5e1; /* Slate 300 */

    /* Sidebar Specific */
    --sidebar-width: 195px;
    --sidebar-collapsed-width: 72px;
    --sidebar-item-height: 48px;
    --sidebar-icon-size: 20px;
    --sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows & Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* Base resets for the portal */
body.portal-layout {
    background-color: var(--bg-app);
    color: var(--text-primary);
    margin: 0;
    overflow-x: hidden;
    display: block; /* Override center alignment if needed */
    padding: 0;
}

.portal-container {
    display: flex;
    min-height: 100vh;
}

.portal-main {
    flex: 1;
    min-height: 100vh;
    transition: margin-left var(--sidebar-transition);
    margin-left: 0; /* Default for hidden sidebar */
}

.sidebar:not(.hidden) ~ .portal-main {
    margin-left: var(--sidebar-width);
}

body.sidebar-collapsed .sidebar:not(.hidden) ~ .portal-main {
    margin-left: var(--sidebar-collapsed-width);
}

@media (max-width: 768px) {
    .portal-main {
        margin-left: 0;
        padding-top: 5rem; /* Space for mobile header */
    }
}