/* NKUI generated artifact. Do not edit directly. Run npm run build. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter/Inter-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/inter/Inter-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/inter/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/inter/Inter-Bold.ttf") format("truetype");
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 1em 0.5em;
}

:root {
	color-scheme: light;
	font-family: "Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--page-bg);
	color: var(--text-primary);
	--space-1: 1px;
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--control-size-m: 36px;
	--control-radius-m: 8px;
	--control-padding-x-m: 12px;
	--focus-outline-width: 2px;
	--focus-outline-offset: 2px;
	--focus-outline-gutter: calc(var(--focus-outline-offset) + var(--focus-outline-width));
	--focus-outline-inset-offset: -2px;
	--focus-outline: var(--focus-outline-width) solid var(--focus-ring);
	--focus-danger-outline: var(--focus-outline-width) solid var(--focus-danger-ring);
	--font-size-micro: 9px;
	--font-size-xxs: 10px;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-md: 13px;
	--font-size-lg: 14px;
	--font-size-xl: 16px;
	--font-size-title: 20px;
	--font-size-body: var(--font-size-lg);
	--font-size-section-title: 18px;
	--font-size-control: var(--font-size-md);
	--font-size-meta: var(--font-size-sm);
	--control-font-size-m: var(--font-size-control);
	--button-primary-bg: var(--text-primary);
	--button-primary-hover-bg: var(--color-grey-65);
	--button-primary-text: var(--page-bg);
	--button-secondary-bg: var(--control-hover-bg);
	--button-secondary-hover-bg: var(--color-grey-15);
	--button-secondary-text: var(--text-primary);
	--button-danger-bg: var(--color-red-soft);
	--button-danger-hover-bg: var(--color-red-muted);
	--button-danger-text: var(--error-text);
	--button-danger-icon-bg: var(--color-transparent);
	--button-danger-icon-hover-bg: var(--color-red-soft);
}

:root {
	/* Palette colors.
	 * These are stable primitives, not theme aliases. Light theme is the default
	 * source in this file; dark theme overrides semantic tokens and only the
	 * chromatic primitives that need a dark-background correction.
	 *
	 * Neutral grey names use two-digit approximate black-percentage stops:
	 * --color-grey-05 is very light, --color-grey-95 is near black.
	 *
	 * Accent suffixes:
	 * - bright: higher-energy solid accent.
	 * - dim: darker/less present solid accent; use rarely and document why.
	 * - soft: low-emphasis translucent fill.
	 * - muted: stronger translucent fill, border, or hover.
	 * - line: border/accent line derived from the base hue.
	 * - highlight: temporary attention fill.
	 * - fade: transparent endpoint for fading animations.
	 * Disabled/off states should normally be semantic component states, not
	 * primitive color names.
	 */
	--color-transparent: transparent;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-grey-03: #f2f2f2;
	--color-grey-05: #f9f9f9;
	--color-grey-10: #f1f1f1;
	--color-grey-15: #e8e8e8;
	--color-grey-30: #bfbfbf;
	--color-grey-35: #b9bcbf;
	--color-grey-50: #8f8f8f;
	--color-grey-65: #5d5d5d;
	--color-grey-80: #343434;
	--color-grey-85: #2a2d31;
	--color-grey-86: #252525;
	--color-grey-88: #1b1b1b;
	--color-grey-90: #141414;
	--color-grey-94: #111111;
	--color-grey-95: #0d0d0d;
	--color-black-alpha-025: rgb(from var(--color-black) r g b / 0.025);
	--color-black-alpha-03: rgb(from var(--color-black) r g b / 0.03);
	--color-black-alpha-04: rgb(from var(--color-black) r g b / 0.04);
	--color-black-alpha-08: rgb(from var(--color-black) r g b / 0.08);
	--color-black-alpha-12: rgb(from var(--color-black) r g b / 0.12);
	--color-black-alpha-18: rgb(from var(--color-black) r g b / 0.18);
	--color-black-alpha-24: rgb(from var(--color-black) r g b / 0.24);
	--color-black-alpha-30: rgb(from var(--color-black) r g b / 0.30);
	--color-black-alpha-36: rgb(from var(--color-black) r g b / 0.36);
	--color-black-alpha-48: rgb(from var(--color-black) r g b / 0.48);
	--color-black-alpha-72: rgb(from var(--color-black) r g b / 0.72);
	--color-grey-90-overlay: rgb(from var(--color-grey-90) r g b / 0.92);
	--color-white-alpha-04: rgb(from var(--color-white) r g b / 0.04);
	--color-white-alpha-06: rgb(from var(--color-white) r g b / 0.06);
	--color-white-alpha-12: rgb(from var(--color-white) r g b / 0.12);
	--color-white-alpha-14: rgb(from var(--color-white) r g b / 0.14);
	--color-white-alpha-16: rgb(from var(--color-white) r g b / 0.16);
	--color-white-alpha-18: rgb(from var(--color-white) r g b / 0.18);
	--color-white-alpha-20: rgb(from var(--color-white) r g b / 0.20);
	--color-white-alpha-24: rgb(from var(--color-white) r g b / 0.24);
	--color-white-alpha-48: rgb(from var(--color-white) r g b / 0.48);
	--color-white-alpha-62: rgb(from var(--color-white) r g b / 0.62);
	--color-white-alpha-64: rgb(from var(--color-white) r g b / 0.64);
	--color-white-alpha-72: rgb(from var(--color-white) r g b / 0.72);
	--color-white-alpha-78: rgb(from var(--color-white) r g b / 0.78);
	--color-white-alpha-92: rgb(from var(--color-white) r g b / 0.92);
	--color-white-alpha-95: rgb(from var(--color-white) r g b / 0.95);
	--color-white-overlay: rgb(from var(--color-white) r g b / 0.92);
	--color-blue: #93c5fd;
	--color-green-bright: #79e21d;
	--color-green: #2f9e44;
	--color-green-dim: #265f16;
	--color-green-soft: rgb(from var(--color-green) r g b / 0.10);
	--color-green-muted: rgb(from var(--color-green) r g b / 0.14);
	--color-green-line: rgb(from var(--color-green) r g b / 0.26);
	--color-yellow-pale: #fff59e;
	--color-yellow: #eab308;
	--color-yellow-dim: #4c4316;
	--color-yellow-soft: rgb(from var(--color-yellow) r g b / 0.14);
	--color-yellow-muted: rgb(from var(--color-yellow) r g b / 0.28);
	--color-yellow-highlight: rgb(from var(--color-yellow-pale) r g b / 0.58);
	--color-yellow-fade: rgb(from var(--color-yellow-pale) r g b / 0);
	--color-orange: #ff7c00;
	--color-red: #dc2626;
	--color-red-soft: rgb(from var(--color-red) r g b / 0.10);
	--color-red-muted: rgb(from var(--color-red) r g b / 0.20);
}

:root {
	/* Semantic colors. Theme files override these role tokens, not the neutral
	 * primitive palette. New components should consume this layer first.
	 */
	--page-bg: var(--color-white);
	--page-bg-lift: none;
	--text-primary: var(--color-grey-95);
	--text-secondary: var(--color-grey-65);
	--text-tertiary: var(--color-grey-50);
	--text-completed: var(--color-grey-30);
	--text-invisible: var(--color-transparent);
	--selection-bg: var(--color-blue);
	--selection-text: var(--color-black);
	--control-bg: var(--color-transparent);
	--surface-color: var(--color-grey-05);
	--field-bg: var(--color-white);
	--control-hover-bg: var(--color-grey-10);
	--toggle-control-color: var(--text-completed);
	--toggle-track-bg: var(--color-grey-95);
	--theme-toggle-track-bg: var(--ghost-bg);
	--toggle-active-bg: var(--color-white);
	--toggle-active-shadow: 0 1px 2px var(--color-black-alpha-08);
	--focus-ring: var(--color-blue);
	--focus-danger-ring: var(--error-text);
	--ghost-bg: var(--color-black-alpha-03);
	--drag-shadow: 0 8px 24px var(--color-black-alpha-12);
	--tooltip-bg: var(--color-grey-90-overlay);
	--tooltip-text: var(--color-white);
	--error-text: var(--color-red);
	--spinner-border-color: var(--color-black-alpha-12);
	--toast-bg: var(--color-grey-90-overlay);
	--toast-text: var(--color-white);
	--toast-shadow: 0 4px 12px var(--color-black-alpha-18);
	--modal-backdrop-bg: var(--color-black-alpha-30);
	--modal-panel-bg: var(--color-white);
	--modal-panel-border: var(--color-black-alpha-12);
}