@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 */
:root {
	--background: 248 250 252; /* slate-50 */
	--surface: 255 255 255;    /* white */
	--surface-raised: 241 245 249; /* slate-100 */
	--border: 226 232 240;     /* slate-200 */
	--text-primary: 15 23 42;  /* slate-900 */
	--text-secondary: 100 116 139; /* slate-500 */
	--text-muted: 148 163 184; /* slate-400 */
}

/* Design tokens — dark mode */
.dark {
	--background: 15 23 42;    /* slate-950 */
	--surface: 30 41 59;       /* slate-800 → closer to slate-900 card */
	--surface-raised: 51 65 85; /* slate-700 */
	--border: 51 65 85;        /* slate-700 */
	--text-primary: 248 250 252; /* slate-50 */
	--text-secondary: 148 163 184; /* slate-400 */
	--text-muted: 100 116 139;   /* slate-500 */
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

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