:root {
    /* Primary Brand Colors (Violet/Indigo based for premium feel) */
    --primary-hue: 250;
    --primary-sat: 85%;
    --primary-lig: 60%;
    
    --primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-lig));
    --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 50%);
    --primary-light: hsl(var(--primary-hue), var(--primary-sat), 95%);
    --primary-rgb: 108, 92, 231; /* For rgba usage */

    /* Semantic Colors */
    --success: hsl(150, 80%, 40%);
    --success-bg: hsl(150, 80%, 96%);
    --warning: hsl(35, 90%, 55%);
    --warning-bg: hsl(35, 90%, 96%);
    --danger: hsl(350, 80%, 60%);
    --danger-bg: hsl(350, 80%, 96%);
    --info: hsl(200, 80%, 55%);
    --info-bg: hsl(200, 80%, 96%);

    /* Neutral Colors (Light Mode) */
    --bg-body: hsl(220, 20%, 97%);
    --bg-surface: hsl(0, 0%, 100%);
    --bg-surface-2: hsl(220, 20%, 98%);
    
    --text-main: hsl(220, 20%, 20%);
    --text-muted: hsl(220, 15%, 50%);
    --text-light: hsl(220, 15%, 70%);

    --border: hsl(220, 15%, 88%);
    --border-hover: hsl(220, 15%, 80%);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 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);

    /* Dimensions */
    --sidebar-width: 250px;
    --header-height: 64px;
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    
    /* Typography */
    --font-family: 'Tajawal', sans-serif;
}

/* Dark Mode Overrides */
:root.dark {
    --bg-body: hsl(220, 20%, 10%);
    --bg-surface: hsl(220, 20%, 16%);
    --bg-surface-2: hsl(220, 20%, 20%);
    
    --text-main: hsl(220, 20%, 95%);
    --text-muted: hsl(220, 15%, 70%);
    --text-light: hsl(220, 15%, 50%);

    --border: hsl(220, 15%, 25%);
    --border-hover: hsl(220, 15%, 35%);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    
    /* Adjust semantic backgrounds for dark mode to be less stark */
    --success-bg: hsl(150, 30%, 20%);
    --warning-bg: hsl(35, 30%, 20%);
    --danger-bg: hsl(350, 30%, 20%);
    --info-bg: hsl(200, 30%, 20%);
}