:root {
    --dashboard-chart-accent-1: var(--color-brand-500);
    --dashboard-chart-accent-2: var(--color-sky-500);
    --dashboard-chart-accent-3: #f59e0b;
    --dashboard-chart-background: var(--fs-surface);
    --dashboard-chart-grid: var(--fs-border);
    --dashboard-chart-muted-text: var(--fs-text-muted);
    --dashboard-chart-text: var(--fs-text);
}

[data-theme="dark"] {
    --dashboard-chart-accent-1: var(--color-brand-400);
    --dashboard-chart-accent-2: var(--color-sky-500);
    --dashboard-chart-accent-3: #fbbf24;
    --dashboard-chart-background: var(--fs-surface);
    --dashboard-chart-grid: var(--fs-border);
    --dashboard-chart-muted-text: var(--fs-text-muted);
    --dashboard-chart-text: var(--fs-text);
}

.dashboard-charts {
    display: grid;
    gap: 1.5rem;
}

.dashboard-chart {
    background-color: var(--dashboard-chart-background);
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
}

.dashboard-chart-canvas {
    display: block;
    height: 320px;
    width: 100%;
}