@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

	--color-background: #fafafa;
	--color-foreground: #0f172a;
	--color-card: #ffffff;
	--color-card-foreground: #0f172a;
	--color-popover: #ffffff;
	--color-popover-foreground: #0f172a;
	--color-primary: #4f8cff;
	--color-primary-foreground: #ffffff;
	--color-secondary: #f1f5f9;
	--color-secondary-foreground: #0f172a;
	--color-muted: #f1f5f9;
	--color-muted-foreground: #64748b;
	--color-accent: #f1f5f9;
	--color-accent-foreground: #0f172a;
	--color-destructive: #ef4444;
	--color-destructive-foreground: #ffffff;
	--color-border: #e2e8f0;
	--color-input: #e2e8f0;
	--color-ring: #4f8cff;
	/* Status / Grafana-link semantic cues — single source of truth for Badges.
	   chart-1=info/brand, chart-2=success, chart-3=warning,
	   chart-4=destructive, chart-5=neutral-accent. */
	--color-chart-1: #4f8cff;
	--color-chart-2: #22c55e;
	--color-chart-3: #f59e0b;
	--color-chart-4: #ef4444;
	--color-chart-5: #8b5cf6;
	--radius: 0.625rem;
	--color-sidebar-background: #fafafa;
	--color-sidebar-foreground: #0f172a;
	--color-sidebar-primary: #4f8cff;
	--color-sidebar-primary-foreground: #ffffff;
	--color-sidebar-accent: #f1f5f9;
	--color-sidebar-accent-foreground: #0f172a;
	--color-sidebar-border: #e2e8f0;
	--color-sidebar-ring: #4f8cff;
}

.dark {
	--color-background: #0f172a;
	--color-foreground: #f8fafc;
	--color-card: #1e293b;
	--color-card-foreground: #f8fafc;
	--color-popover: #1e293b;
	--color-popover-foreground: #f8fafc;
	--color-primary: #4f8cff;
	--color-primary-foreground: #ffffff;
	--color-secondary: #1e293b;
	--color-secondary-foreground: #f8fafc;
	--color-muted: #334155;
	--color-muted-foreground: #94a3b8;
	--color-accent: #334155;
	--color-accent-foreground: #f8fafc;
	--color-destructive: #ef4444;
	--color-destructive-foreground: #ffffff;
	--color-border: #334155;
	--color-input: #334155;
	--color-ring: #4f8cff;
	/* Status / Grafana-link semantic cues — single source of truth for Badges.
	   chart-1=info/brand, chart-2=success, chart-3=warning,
	   chart-4=destructive, chart-5=neutral-accent. */
	--color-chart-1: #4f8cff;
	--color-chart-2: #22c55e;
	--color-chart-3: #f59e0b;
	--color-chart-4: #ef4444;
	--color-chart-5: #8b5cf6;
	--color-sidebar-background: #0f172a;
	--color-sidebar-foreground: #f8fafc;
	--color-sidebar-primary: #4f8cff;
	--color-sidebar-primary-foreground: #ffffff;
	--color-sidebar-accent: #334155;
	--color-sidebar-accent-foreground: #f8fafc;
	--color-sidebar-border: #334155;
	--color-sidebar-ring: #4f8cff;
}

@layer base {
	body {
		background-color: var(--color-background);
		color: var(--color-foreground);
		font-family: var(--font-sans);
	}
}

html,
body,
#root {
	margin: 0;
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}