/*
 *	====================
 *	5-theme.css — The design theme on top of the Mako core.
 *	====================
 *
 *	Inter, 16px / 1.5, role-token colours. Text helpers from the design
 *	(.muted .small .num .bold .sr), links, the focus ring, reduced motion.
 *	Colours and sizes: see 0-root.css.
 */



/* -- Body -- */

body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'cv11';
	color: var(--ink);
	background: var(--bg);
}

/* A forced-theme panel (.theme-light / .theme-dark) paints its own ground. */
.theme-light,
.theme-dark {
	color: var(--ink);
	background: var(--bg);
}



/* -- Headings -- */

h1,
h2,
h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.015em;
}



/* -- Links -- */

a {
	color: var(--pri);
}

a:hover {
	color: var(--pri-hover);
}



/* -- Text helpers -- */

.muted {
	color: var(--muted);
}

.small {
	font-size: var(--small);
}

.num {
	font-variant-numeric: tabular-nums;
}

.bold {
	font-weight: 600;
}

/* Visually hidden, still read by screen readers */
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}



/* -- Emphasis (the reset strips the browser's bold and italic) -- */

b,
strong {
	font-weight: 600;
}

em {
	font-style: italic;
}



/*
 * Mako utilities, in role tokens
 * Weight (.w-*), text colour (.text-*), fill (.fill-*) and radius (.radius-*).
 * Colours flip with the theme because they are roles.
 */

.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }

.text-ink { color: var(--ink); }
.text-muted { color: var(--muted); }
.text-pri { color: var(--pri); }
.text-danger { color: var(--danger); }

.fill-bg { background-color: var(--bg); }
.fill-surface { background-color: var(--surface); }
.fill-panel { background-color: var(--panel); }

.radius-sm { border-radius: var(--radius-sm); }
.radius { border-radius: var(--radius); }
.radius-card { border-radius: var(--radius-card); }
.radius-sheet { border-radius: var(--radius-sheet); }
.radius-round { border-radius: 9999px; } /* circles and pills */



/*
 * Focus ring
 * Every interactive element, keyboard focus only. A 2px blue line with a 3px
 * --ring halo: the line carries the 3:1 contrast on both themes, the halo
 * matches the field focus in components/form.css.
 */

:focus-visible {
	outline: 2px solid var(--pri);
	outline-offset: 0;
	box-shadow: 0 0 0 5px var(--ring);
}



/* -- Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}