* {
    box-sizing: border-box;
}

:root {
    /* --- CORE PALETTE: Slate (Neutral) --- */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* --- CORE PALETTE: Blue (Brand) --- */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* --- SEMANTIC VARIABLES (Light Mode) --- */

    /* Backgrounds */
    --bg-body: #f8fafc;
    /* Very light gray/almost white for body */
    --bg-surface: #ffffff;
    /* Pure white for cards/surfaces */
    --bg-card: #ffffff;
    /* Alias */
    --bg-sidebar: #ffffff;
    /* White sidebar */
    --bg-header: #ffffff;
    /* White header */
    --bg-input: #ffffff;
    /* White inputs */
    /* Light gray hover */
    --bg-deep: #f1f5f9;
    /* Deep background for gradients */

    /* Text */
    --text-main: #0f172a;
    /* Dark slate for primary text */
    --text-secondary: #64748b;
    /* Medium slate for secondary text */
    --text-muted: #94a3b8;
    /* Light slate for muted text */
    --text-on-primary: #ffffff;
    /* White text on primary buttons */

    /* Borders */
    --border-color: #e2e8f0;
    /* Light gray border */
    --glass-border: #e2e8f0;
    /* Alias (no more glass) */

    /* Brand Colors */
    --primary: var(--primary-600);
    /* Slightly darker blue for text legibility */
    --primary-hover: var(--primary-700);
    --primary-light: var(--primary-50);

    /* Status Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Shadows (Soft & Modern) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Dimensions */
    --sidebar-width: 260px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-soft: 12px;

    /* Additional Variables */
    --bg-hover: #f1f5f9;
    --text-dim: #94a3b8;
}