/* ==========================================================================
   Н-ИНФО — дизайн-токены
   Единственный источник значений для цвета, типографики, метрики и моции.
   ========================================================================== */

/* --- Inter Variable, кириллица + латиница, self-hosted ------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin.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;
}

:root {
	/* --- Шкала отступов, база 4px ------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 28px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;

	/* --- Радиусы ------------------------------------------------------ */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-full: 999px;

	/* --- Типографика -------------------------------------------------- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', sans-serif;

	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 15px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-xl: 21px;
	--fs-2xl: clamp(22px, 2.2vw, 26px);
	--fs-3xl: clamp(26px, 3vw, 34px);
	--fs-4xl: clamp(30px, 4.4vw, 52px);

	--lh-tight: 1.12;
	--lh-snug: 1.28;
	--lh-normal: 1.5;
	--lh-relaxed: 1.65;

	--tracking-caps: 0.06em;
	--tracking-tight: -0.011em;

	/* --- Нейтральная рампа ------------------------------------------- */
	--n-0: #ffffff;
	--n-25: #fbfcfd;
	--n-50: #f6f8fa;
	--n-100: #eef1f4;
	--n-150: #e4e8ed;
	--n-200: #d8dee5;
	--n-300: #bcc5cf;
	--n-400: #97a3b0;
	--n-500: #667382;
	--n-600: #54606e;
	--n-700: #3c4653;
	--n-800: #29313b;
	--n-900: #171c23;
	--n-950: #0d1116;

	/* --- Бренд: один оранжевый и производные -------------------------
	   Ступени не декоративные, у каждой своя работа:
	   500 — знак и акценты (3.12:1 к белому — хватает для иконок);
	   600 — заливка под белым текстом (4.70:1);
	   700 — текст ссылок и ховер заливки (6.51:1).
	   ----------------------------------------------------------------- */
	--brand-50: #fff5ef;
	--brand-100: #ffe8d9;
	--brand-200: #ffd0b0;
	--brand-300: #ffab77;
	--brand-400: #ff8a45;
	--brand-500: #f2670f;
	--brand-600: #c44f06;
	--brand-700: #a33d04;
	--brand-800: #7d2e04;
	--brand-900: #561f04;

	/* --- Семантика ---------------------------------------------------
	   Оттенки подобраны так, чтобы проходить 4.5:1 на своей мягкой
	   подложке, а не только на белом. */
	--green-500: #0f7a52;
	--green-50: #e8f7f0;
	--amber-500: #9e5e00;
	--amber-50: #fff6e5;
	--red-500: #c62f2f;
	--red-50: #fdeded;
	--blue-500: #1462b3;
	--blue-50: #eaf3fc;

	/* --- Моция -------------------------------------------------------- */
	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-slow: 280ms;
	--ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
	--ease-in-out: cubic-bezier(0.6, 0, 0.35, 1);

	/* --- Слои --------------------------------------------------------- */
	--z-sticky: 100;
	--z-header: 200;
	--z-popover: 300;
	--z-drawer: 400;
	--z-toast: 500;

	/* --- Раскладка ---------------------------------------------------- */
	--page-max: 1440px;
	--page-gutter: var(--sp-5);
	--header-h: 64px;
	--chipbar-h: 48px;
}

/* ==========================================================================
   Светлая тема (по умолчанию)
   Контраст текстовых токенов на --bg посчитан и указан рядом.
   ========================================================================== */

:root,
[data-theme='light'] {
	color-scheme: light;

	--bg: var(--n-0);
	--bg-subtle: var(--n-50);
	--bg-sunken: var(--n-100);

	--surface: var(--n-0);
	--surface-2: var(--n-50);
	--surface-3: var(--n-100);
	--surface-inset: var(--n-100);

	--border: var(--n-150);
	--border-strong: var(--n-200);
	/* Граница интерактивного элемента: единственный признак кнопки-аутлайна,
	   поэтому обязана держать 3:1 по WCAG 1.4.11 (3.18:1). Декоративные
	   разделители этому требованию не подчиняются и живут в --border. */
	--border-control: #85929f;

	--text: var(--n-900); /* 17.1:1 */
	--text-secondary: var(--n-700); /* 9.6:1  */
	--text-muted: var(--n-500); /* 4.84:1 — проходит AA для 15px */
	--text-on-brand: #ffffff;

	--brand: var(--brand-500);
	--brand-hover: var(--brand-700);
	--brand-fill: var(--brand-600); /* 4.70:1 под белым текстом */
	--brand-text: var(--brand-700); /* 6.51:1 — оранжевый для текста ссылок */
	--brand-soft: var(--brand-50);
	--brand-soft-border: var(--brand-200);

	--accent-success: var(--green-500);
	--accent-success-soft: var(--green-50);
	--accent-warning: var(--amber-500);
	--accent-warning-soft: var(--amber-50);
	--accent-danger: var(--red-500);
	--accent-danger-soft: var(--red-50);
	--accent-info: var(--blue-500);
	--accent-info-soft: var(--blue-50);

	--focus-ring: var(--brand-500);
	--focus-ring-offset: var(--bg);

	--shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06),
		0 1px 3px rgba(16, 24, 40, 0.04);
	--shadow-2: 0 2px 4px rgba(16, 24, 40, 0.05),
		0 4px 12px rgba(16, 24, 40, 0.07);
	--shadow-3: 0 8px 16px rgba(16, 24, 40, 0.07),
		0 16px 40px rgba(16, 24, 40, 0.1);
	--shadow-4: 0 16px 32px rgba(16, 24, 40, 0.1),
		0 32px 72px rgba(16, 24, 40, 0.14);

	--scrim: rgba(13, 17, 22, 0.5);
	--media-placeholder: var(--n-100);
	--skeleton-base: var(--n-100);
	--skeleton-sheen: var(--n-50);
}

/* ==========================================================================
   Тёмная тема
   ========================================================================== */

[data-theme='dark'] {
	color-scheme: dark;

	--bg: #0f1318;
	--bg-subtle: #131820;
	--bg-sunken: #0b0e13;

	--surface: #171c23;
	--surface-2: #1f262f;
	--surface-3: #262f3a;
	--surface-inset: #10151b;

	--border: #2b3440;
	--border-strong: #3a4553;
	--border-control: #5b6775; /* 3.23:1 к --bg */

	--text: #e8ecf1; /* 15.7:1 */
	--text-secondary: #c3ccd6; /* 11.5:1 */
	--text-muted: #a3afbc; /* 8.36:1 */
	--text-on-brand: #1a0d04;

	--brand: #ff7d29;
	--brand-hover: #ff9550;
	--brand-fill: #ff7d29; /* 7.45:1 под --text-on-brand */
	--brand-text: #ff9a5c; /* 8.9:1 на --bg */
	--brand-soft: #2a1a10;
	--brand-soft-border: #4a2d15;

	--accent-success: #4ecb92;
	--accent-success-soft: #10261d;
	--accent-warning: #f0b45c;
	--accent-warning-soft: #2a2010;
	--accent-danger: #ff8080;
	--accent-danger-soft: #2b1414;
	--accent-info: #6cb4f0;
	--accent-info-soft: #10202e;

	--focus-ring: #ff9a5c;
	--focus-ring-offset: var(--bg);

	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
	--shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45);
	--shadow-4: 0 18px 36px rgba(0, 0, 0, 0.55),
		0 36px 80px rgba(0, 0, 0, 0.5);

	--scrim: rgba(0, 0, 0, 0.66);
	--media-placeholder: #1f262f;
	--skeleton-base: #1f262f;
	--skeleton-sheen: #262f3a;
}

/* Системное предпочтение, пока пользователь не выбрал тему руками. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;

		--bg: #0f1318;
		--bg-subtle: #131820;
		--bg-sunken: #0b0e13;

		--surface: #171c23;
		--surface-2: #1f262f;
		--surface-3: #262f3a;
		--surface-inset: #10151b;

		--border: #2b3440;
		--border-strong: #3a4553;
		--border-control: #5b6775;

		--text: #e8ecf1;
		--text-secondary: #c3ccd6;
		--text-muted: #a3afbc;
		--text-on-brand: #1a0d04;

		--brand: #ff7d29;
		--brand-hover: #ff9550;
		--brand-fill: #ff7d29;
		--brand-text: #ff9a5c;
		--brand-soft: #2a1a10;
		--brand-soft-border: #4a2d15;

		--accent-success: #4ecb92;
		--accent-success-soft: #10261d;
		--accent-warning: #f0b45c;
		--accent-warning-soft: #2a2010;
		--accent-danger: #ff8080;
		--accent-danger-soft: #2b1414;
		--accent-info: #6cb4f0;
		--accent-info-soft: #10202e;

		--focus-ring: #ff9a5c;

		--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
		--shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5),
			0 6px 16px rgba(0, 0, 0, 0.4);
		--shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5),
			0 18px 44px rgba(0, 0, 0, 0.45);
		--shadow-4: 0 18px 36px rgba(0, 0, 0, 0.55),
			0 36px 80px rgba(0, 0, 0, 0.5);

		--scrim: rgba(0, 0, 0, 0.66);
		--media-placeholder: #1f262f;
		--skeleton-base: #1f262f;
		--skeleton-sheen: #262f3a;
	}
}