/*
 * Design tokens — the single source of truth for the whole UI.
 *
 * Extracted verbatim from docs/mockup.html (:root block). Nothing else in the
 * project declares a raw colour, font stack, shadow or radius: components.css
 * and layout.css consume these custom properties only.
 */

/* ---------- Self-hosted fonts (no third-party requests at runtime) ---------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
	--bg: #F7F7F8;
	--surface: #FFFFFF;
	--surface-2: #FBFBFC;
	--border: #E6E6EA;
	--border-strong: #D8D8DE;
	--text: #17171C;
	--text-2: #5C5C66;
	--text-3: #8E8E99;
	--primary: #4338CA;
	--primary-hover: #3730A3;
	--primary-soft: #EEF0FE;
	--primary-soft-border: #DCDFFC;
	--green: #0E9F6E;
	--green-soft: #E6F7F1;
	--amber: #D97706;
	--amber-soft: #FCF3E6;
	--red: #DC2626;
	--red-soft: #FDECEC;
	--blue: #2563EB;
	--blue-soft: #EAF1FE;
	--violet: #7C3AED;
	--violet-soft: #F3EDFD;
	/* The neutral of the status palette. Not --text-3: a status colour is a
	   deliberate choice from a named list, and reusing a text token would tie
	   "this state is unremarkable" to typography that changes for other
	   reasons. Ticket statuses use it for Closed. */
	--gray: #6B7280;
	--gray-soft: #F1F1F4;
	--shadow-sm: 0 1px 2px rgba(23, 23, 28, .05);
	--shadow-md: 0 4px 12px rgba(23, 23, 28, .08);
	--shadow-lg: 0 12px 32px rgba(23, 23, 28, .14);
	--radius: 10px;
	--sidebar-w: 232px;

	/*
	 * The topbar's height, as a token, because two files need to agree on it.
	 *
	 * layout.css sets the header to this height; components.css positions the
	 * notification dropdown below it when the dropdown is anchored to the
	 * VIEWPORT rather than to the bell (which is what it must do on a narrow
	 * screen — see .bell-menu). A literal in both places is a literal that
	 * drifts, and the way it fails is a menu floating over the header it is
	 * supposed to hang from.
	 */
	--topbar-h: 52px;
	/*
	 * ---------- The spacing scale ----------
	 *
	 * SIX STEPS, AND THEY ARE NOT INVENTED. Counting every margin, padding and
	 * gap already in components.css and layout.css, the values that dominate are
	 * 4, 8, 12 and 16 — so the scale is those, plus 0 and one larger step for
	 * separating sections. The numbering is Bootstrap's because everybody
	 * already knows it; the VALUES are this app's.
	 *
	 * Components keep their own literals, including the odd 6px, 10px and 14px
	 * that fine-tune a control against a line box. That is deliberate: a scale is
	 * for the space BETWEEN things a page composes, not for the internal metrics
	 * of a component, and forcing every 10px to become 8 or 12 would be
	 * redesigning the app to fit a table of numbers.
	 *
	 * What these exist to replace is the `style="margin-top:16px"` that a new
	 * screen otherwise grows. See the utilities at the end of components.css and
	 * the reference on /styleguide.
	 */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;

	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Additions the mockup used inline; kept here so nothing else hardcodes them. */
	--on-primary: #FFFFFF;
	--brand-gradient: linear-gradient(135deg, #4338CA, #6D28D9);
	--overlay: rgba(23, 23, 28, .32);
	--forecast: #C7CBF5;
	--toast-icon: #34D399;
	--focus-ring: 0 0 0 3px var(--primary-soft);
	--focus-ring-error: 0 0 0 3px var(--red-soft);
	--skeleton: #ECECF0;
	--skeleton-shine: #F5F5F8;
	--avatar-1: #4338CA;
	--avatar-2: #0E9F6E;
	--avatar-3: #D97706;
	--avatar-4: #DC2626;
	--avatar-5: #2563EB;
	--avatar-6: #7C3AED;
	--avatar-7: #0F766E;
	--avatar-8: #BE185D;
}

/* ---------- Base ---------- */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	font-size: 13.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

::placeholder {
	color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}