/* ===================================================================
   DESIGN TOKENS — variables.css
   All CSS custom properties. Change here to retheme the whole portal.
   =================================================================== */

:root {
    /* Brand colours */
    --primary:       #4f46e5;
    --primary-dark:  #3730a3;
    --primary-light: #eef2ff;
    --success:       #10b981;
    --warning:       #f59e0b;
    --danger:        #ef4444;
    --info:          #3b82f6;

    /* Sidebar */
    --sidebar-width:          260px;
    --sidebar-bg:             #1e1b4b;
    --sidebar-text:           #c7d2fe;
    --sidebar-active-bg:      rgba(255, 255, 255, 0.12);
    --sidebar-hover-bg:       rgba(255, 255, 255, 0.07);

    /* Topbar */
    --topbar-height: 60px;
    --topbar-bg:     #ffffff;

    /* Page */
    --body-bg:       #f5f7fb;
    --card-bg:       #ffffff;
    --border-color:  #e5e7eb;
    --text-primary:  #111827;
    --text-secondary:#6b7280;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.12);

    /* Geometry */
    --radius:    12px;
    --radius-sm:  8px;
    --radius-xs:  6px;

    /* Motion */
    --transition: 0.25s ease;
}