@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

/* Design tokens — light mode
 * Surface hierarchy (stacked sheets of paper):
 *   background → surface-container-low → surface → surface-raised (cards pop up)
 */
:root {
	--background: 247 249 251;          /* #f7f9fb — spec exact value */
	--surface-container-low: 241 245 249; /* slate-100 — subtle grouping bg */
	--surface: 255 255 255;             /* white — base card surface */
	--surface-raised: 248 250 252;      /* slate-50 — popped card (sidebar) */
	--text-primary: 15 23 42;           /* slate-900 — titles only */
	--text-secondary: 100 116 139;      /* slate-500 — meta / labels */
	--text-muted: 148 163 184;          /* slate-400 */
	--destructive: 185 28 28;           /* red-700 ≈ #ba1a1a spec */
}

/* Design tokens — dark mode */
.dark {
	--background: 2 6 23;               /* #020617 slate-950 — spec exact value */
	--surface-container-low: 15 23 42;  /* slate-900 — subtle grouping */
	--surface: 30 41 59;                /* slate-800 — base card surface */
	--surface-raised: 51 65 85;         /* slate-700 — popped card (sidebar) */
	--text-primary: 248 250 252;        /* slate-50 */
	--text-secondary: 148 163 184;      /* slate-400 */
	--text-muted: 100 116 139;          /* slate-500 */
	--destructive: 239 68 68;           /* red-500 — more visible on dark bg */
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	font-family: 'Inter', system-ui, sans-serif;
	background-color: rgb(var(--background));
	color: rgb(var(--text-primary));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}