@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 (default).
 *
 * Surface hierarchy (stacked sheets of paper):
 *   background → surface-container-low → surface → surface-raised (cards pop up)
 *
 * IMPORTANT (repo-wide gotcha): values are RGB triplets so they can be
 * consumed via rgb(var(--token) / <alpha>). Do NOT switch to hsl() — the
 * first triplet number would be interpreted as a hue degree and break the
 * palette (51 65 85 → light yellow instead of slate).
 *
 * Fase 9.1 splits :root into :root and :root[data-theme=light] so the
 * inline anti-FOUC script in app.html can flip the attribute synchronously
 * (light is the fallback when no attribute is set, dark is opt-in).
 */
:root,
:root[data-theme='light'] {
	--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.
 * Contrast on text-primary against background = 14.7:1 (slate-50 on
 * slate-950) — well above WCAG AAA 7:1. text-secondary on background =
 * 5.8:1, above AA 4.5:1. */
:root[data-theme='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;
}