/*
 * Дизайн-токени KotoHosting.
 *
 * Палітра взята з README архіву макетів і перевірена по пікселях самих
 * макетів: домінантні акценти лягли на 30° (бурштин і латунь), 20° (мідь)
 * та 170° (бірюза) — тобто заявлена система збіглася з намальованою.
 *
 * Правило: у решті CSS не має бути жодного вписаного вручну кольору чи відступу.
 * Усе, що можна змінити централізовано, живе тут.
 */

:root {
	/* — Основа ————————————————————————————— */
	--koto-bg: #08141F;
	--koto-bg-deep: #050E17;         /* провали між секціями, підвал */
	--koto-surface: #111F2C;         /* картки й панелі */
	--koto-surface-raised: #16283a;  /* картка під курсором, активний стан */
	--koto-surface-sunken: #0B1825;  /* поля вводу, вкладені блоки */

	/* — Метал ————————————————————————————— */
	--koto-brass: #B88746;
	--koto-brass-light: #F4CE86;
	--koto-brass-dark: #77501F;
	--koto-copper: #A65D37;

	/* — Акценти ———————————————————————————— */
	--koto-amber: #F3A83B;
	--koto-amber-bright: #FFC163;
	--koto-amber-deep: #C9821F;
	--koto-teal: #20B8B0;
	--koto-teal-dim: #16807B;

	/* — Стани —————————————————————————————— */
	--koto-ok: var(--koto-teal);
	--koto-warn: var(--koto-amber);
	--koto-danger: #E0603F;

	/* — Текст —————————————————————————————— */
	--koto-ink: #F4EDE2;             /* теплий білий — основний текст */
	--koto-ink-muted: #A8BAC8;       /* другорядний текст */
	--koto-ink-faint: #6E8393;       /* підписи, дрібні позначки */
	--koto-ink-on-amber: #14202B;    /* текст на бурштиновій кнопці */

	/* — Лінії ——————————————————————————————
	 * Рамки в макеті — це тонка латунь на темному, тож майже всюди
	 * потрібен саме напівпрозорий колір, а не суцільний.
	 */
	--koto-line: rgba(184, 135, 70, 0.28);
	--koto-line-strong: rgba(184, 135, 70, 0.55);
	--koto-line-faint: rgba(184, 135, 70, 0.14);
	--koto-line-cool: rgba(32, 184, 176, 0.35);

	/* — Світіння ————————————————————————————
	 * Бірюзове світіння приладів — впізнаваний елемент макета.
	 */
	--koto-glow-teal: 0 0 24px rgba(32, 184, 176, 0.35);
	--koto-glow-amber: 0 0 28px rgba(243, 168, 59, 0.30);

	/* — Тіні ——————————————————————————————— */
	--koto-shadow-card: 0 2px 18px rgba(0, 0, 0, 0.45);
	--koto-shadow-lift: 0 12px 38px rgba(0, 0, 0, 0.55);

	/* — Типографіка ————————————————————————— */
	--koto-font-display: 'Philosopher', Georgia, serif;
	--koto-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--koto-font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, monospace;

	/* Плинні розміри: клеми тримають шкалу від 360 px до 1440 px. */
	--koto-text-xs: 0.75rem;
	--koto-text-sm: 0.8125rem;
	--koto-text-base: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
	--koto-text-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
	--koto-text-xl: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
	--koto-text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--koto-text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
	--koto-text-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);

	--koto-leading-tight: 1.12;
	--koto-leading-snug: 1.32;
	--koto-leading-normal: 1.62;

	--koto-tracking-wide: 0.16em;    /* надзаголовки капітеллю */

	/* — Сітка й ритм ————————————————————————— */
	--koto-container: 1200px;
	--koto-container-wide: 1360px;
	--koto-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

	/*
	 * Відступ секції рахується двічі — знизу попередньої й згори наступної.
	 * Тому 3.75rem тут дають 120 px між блоками: саме та щільність, що в
	 * макеті. Ширші значення візуально розсипають сторінку на окремі екрани.
	 */
	--koto-section-y: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
	--koto-gap: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);

	/* — Форма ——————————————————————————————
	 * У макеті кути помірні: картки м'якші за кнопки.
	 */
	--koto-radius-sm: 6px;
	--koto-radius: 10px;
	--koto-radius-lg: 16px;
	--koto-radius-pill: 999px;

	/* — Заклепки ————————————————————————————
	 * Мідні заклепки в кутах карток — головна впізнавана деталь макета.
	 * Розмір і колір тримаємо тут, щоб міняти в одному місці.
	 */
	--koto-rivet-size: 6px;
	--koto-rivet-inset: 7px;
	--koto-rivet: radial-gradient(circle at 32% 30%, #D89A5C 0%, #A65D37 45%, #63381C 100%);

	/* — Рух —————————————————————————————— */
	--koto-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--koto-fast: 140ms;
	--koto-normal: 240ms;

	/* — Шари ——————————————————————————————— */
	--koto-z-header: 100;
	--koto-z-menu: 200;
	--koto-z-modal: 300;
}

/*
 * Макети намальовані тільки в темному вигляді, і це навмисно — світлої
 * версії дизайн-системи не існує. Тож ми не перемикаємо тему за
 * prefers-color-scheme, а лише повідомляємо браузеру, що інтерфейс темний:
 * це фарбує вбудовані елементи (скролбари, поля форм) у тон сайту.
 */
:root {
	color-scheme: dark;
}