:root {
    --gradient-primary: linear-gradient(135deg, #f01875 0%, #0095fa 100%);
    --primary: #f01875;
    --primary-hue: 334.166666667;
    --primary-saturation: 87.804878049%;
    --primary-dark: #c01460;
    --primary-light: #ff5599;
    --accent: #0095fa;
    --accent-hue: 204.24;
    --accent-saturation: 100%;
    --accent-light: #33aaff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border-color: #e2e8f0;
    --space-xs: 0.35rem;
    --space-sm: 0.55rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --app-sidebar-width: 16.5rem;
    --app-header-height: 4.25rem;
    --app-content-gutter: 1rem;
    --app-page: linear-gradient(
        135deg,
        hsl(var(--accent-hue) var(--accent-saturation) 96%) 0%,
        hsl(var(--accent-hue) var(--accent-saturation) 94.7%) 100%
    );
    --app-surface: var(--bg-primary);
    --app-surface-muted: var(--gray-100);
    --app-text: var(--text-primary);
    --app-text-muted: var(--text-secondary);
    --app-on-brand: #ffffff;
    --app-accent-text: var(--accent);
    --app-accent-border: hsl(var(--accent-hue) var(--accent-saturation) 65%);
    --app-primary-text: var(--primary);
    --app-nav-text: var(--app-text-muted);
    --app-accent-icon: var(--accent);
    --app-primary-icon: var(--primary);
    --app-plan-text: var(--primary);
    --app-primary-gradient: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
    --app-accent-gradient: linear-gradient(
        145deg,
        var(--accent-light),
        hsl(var(--accent-hue) var(--accent-saturation) 38%)
    );
    --app-previous-series: rgba(0, 0, 0, 0.25);
    --app-primary-forecast-opacity: 0.25;
    --app-border: var(--gray-200);
    --app-overlay: rgba(15, 23, 42, 0.4);
    --app-shadow: none;
    --app-popover-shadow: 0 0.8rem 2rem rgba(15, 23, 42, 0.18);
    --app-header-top: rgba(255, 255, 255, 1);
    --app-header-bottom: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] {
    color-scheme: dark;
    --app-page: linear-gradient(
        135deg,
        hsl(var(--accent-hue) var(--accent-saturation) 16.7%) 0%,
        hsl(var(--accent-hue) var(--accent-saturation) 14.1%) 100%
    );
    --app-surface: hsl(var(--accent-hue) var(--accent-saturation) 19.8%);
    --app-surface-muted: hsl(var(--accent-hue) var(--accent-saturation) 23.1%);
    --app-text: var(--gray-50);
    --app-text-muted: #b8c6d5;
    --app-accent-text: hsl(var(--accent-hue) var(--accent-saturation) 70%);
    --app-accent-border: hsl(var(--accent-hue) var(--accent-saturation) 65%);
    --app-primary-text: hsl(var(--primary-hue) var(--primary-saturation) 75%);
    --app-nav-text: var(--app-text);
    --app-accent-icon: var(--accent);
    --app-primary-icon: hsl(var(--primary-hue) var(--primary-saturation) 63%);
    --app-plan-text: hsl(var(--accent-hue) var(--accent-saturation) 75%);
    --app-previous-series: rgba(255, 255, 255, 0.25);
    --app-primary-forecast-opacity: 0.5;
    --app-border: hsl(var(--accent-hue) var(--accent-saturation) 27%);
    --app-overlay: rgba(0, 0, 0, 0.65);
    --app-shadow: none;
    --app-header-top: hsl(var(--accent-hue) var(--accent-saturation) 19.8%);
    --app-header-bottom: hsl(var(--accent-hue) var(--accent-saturation) 19.8% / 0.9);
}