:root {
    /* Core backgrounds */
    --bg-primary: hsl(220, 20%, 97%);
    --bg-secondary: hsl(0, 0%, 100%);
    --bg-tertiary: hsl(220, 15%, 95%);

    /* Core text */
    --text-primary: hsl(220, 20%, 10%);
    --text-secondary: hsl(220, 10%, 50%);
    --text-muted: hsl(220, 10%, 50%);

    /* Brand primary (blue) */
    --accent-primary: hsl(220, 60%, 50%);
    --accent-secondary: hsl(220, 60%, 55%);
    --accent-light: hsla(220, 60%, 50%, 0.1);
    --accent-gradient: linear-gradient(135deg, hsl(220, 60%, 50%) 0%, hsl(220, 60%, 60%) 100%);

    /* Accent (teal) */
    --teal: hsl(165, 60%, 40%);
    --teal-light: hsla(165, 60%, 40%, 0.1);

    /* Semantic status colors */
    --success: hsl(155, 65%, 45%);
    --success-light: hsla(155, 65%, 45%, 0.1);
    --warning: hsl(45, 85%, 55%);
    --warning-light: hsla(45, 85%, 55%, 0.15);
    --warning-dark: hsl(45, 85%, 35%);
    --danger: hsl(0, 72%, 55%);
    --danger-light: hsla(0, 72%, 55%, 0.1);

    /* Border */
    --border: hsl(220, 15%, 90%);

    /* Financial colors (Lovable spec) */
    --stat-revenue: hsl(215, 80%, 52%);
    --stat-cost: hsl(0, 72%, 51%);
    --stat-profit: hsl(152, 60%, 40%);
    --stat-hours: hsl(45, 85%, 55%);
    --stat-contractors: hsl(260, 55%, 55%);
    --stat-margin: hsl(165, 60%, 40%);

    /* Stat card icon gradients */
    --stat-gradient-contractors: linear-gradient(135deg, hsl(260, 55%, 55%), hsl(270, 60%, 45%));
    --stat-gradient-hours: linear-gradient(135deg, hsl(45, 85%, 55%), hsl(25, 85%, 55%));
    --stat-gradient-revenue: linear-gradient(135deg, hsl(200, 80%, 55%), hsl(220, 70%, 55%));
    --stat-gradient-cost: linear-gradient(135deg, hsl(350, 75%, 60%), hsl(340, 70%, 55%));
    --stat-gradient-profit: linear-gradient(135deg, hsl(155, 65%, 50%), hsl(140, 60%, 45%));
    --stat-gradient-margin: linear-gradient(135deg, hsl(175, 60%, 50%), hsl(155, 65%, 45%));

    /* Stat card tinted backgrounds */
    --stat-bg-contractors: hsla(220, 40%, 96%, 1);
    --stat-bg-hours: hsla(220, 20%, 97%, 1);
    --stat-bg-revenue: hsla(200, 40%, 95%, 1);
    --stat-bg-cost: hsla(350, 30%, 96%, 1);
    --stat-bg-profit: hsla(152, 30%, 95%, 1);
    --stat-bg-margin: hsla(220, 20%, 97%, 1);

    /* Sidebar */
    --sidebar-bg: hsl(225, 30%, 10%);
    --sidebar-fg: hsl(220, 15%, 85%);
    --sidebar-active: hsl(220, 60%, 55%);
    --sidebar-hover: hsl(225, 25%, 15%);
    --sidebar-border: hsl(225, 25%, 15%);

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

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}