/* ============================================================
   BAZA · Design tokens
   Единственный источник правды: цвет, тип, ритм, движение.

   Система родственна check-you.to (светлая тема по умолчанию +
   тёмная, Inter, мягкие тени, радиусы 8/12/18), но со своим
   характером: тёплая «бумажная» светлая палитра, чернильный
   индиго вместо коралла, серифные заголовки.
   Цвет задаётся через light-dark() — работает благодаря
   color-scheme ниже; data-theme принудительно фиксирует тему.
   ============================================================ */

:root {
	color-scheme: light dark;

	/* ── Ручки бренда ──────────────────────────────────────── */
	--h-ink: 268;   /* индиго — основной */
	--h-warm: 62;   /* янтарь — вторичный */

	/* ── Основной цвет ─────────────────────────────────────── */
	--c-primary:        light-dark(oklch(50% 0.148 var(--h-ink)), oklch(70% 0.128 var(--h-ink)));
	--c-primary-hover:  light-dark(oklch(44% 0.152 var(--h-ink)), oklch(76% 0.118 var(--h-ink)));
	--c-primary-active: light-dark(oklch(39% 0.148 var(--h-ink)), oklch(80% 0.108 var(--h-ink)));
	--c-primary-soft:   light-dark(oklch(95.5% 0.024 var(--h-ink)), oklch(28% 0.048 var(--h-ink)));
	--c-primary-ring:   color-mix(in srgb, var(--c-primary) 30%, transparent);
	--c-on-primary:     light-dark(#ffffff, oklch(20% 0.03 var(--h-ink)));

	/* ── Вторичный (янтарь: «сохранено», отметки, штамп) ───── */
	--c-accent:       light-dark(oklch(63% 0.132 var(--h-warm)), oklch(78% 0.128 var(--h-warm)));
	--c-accent-hover: light-dark(oklch(57% 0.136 var(--h-warm)), oklch(83% 0.118 var(--h-warm)));
	/* -soft держим приглушённым: в тёмной теме янтарь быстро уходит в грязно-коричневый */
	--c-accent-soft:  light-dark(oklch(96% 0.036 var(--h-warm)), oklch(26.5% 0.028 var(--h-warm)));

	/* Коралл check-you.to — ТОЛЬКО для кнопки перехода на CY */
	--c-cy: light-dark(oklch(66% 0.14 22), oklch(74% 0.13 22));

	/* ── Поверхности ───────────────────────────────────────── */
	--c-bg:            light-dark(#f4f1ec, oklch(18.5% 0.012 var(--h-ink)));
	--c-surface:       light-dark(#ffffff, oklch(22.5% 0.014 var(--h-ink)));
	--c-surface-2:     light-dark(#faf8f4, oklch(26% 0.014 var(--h-ink)));
	--c-sunken:        light-dark(#efece5, oklch(20.5% 0.013 var(--h-ink)));
	--c-border:        light-dark(#e7e1d6, oklch(31% 0.016 var(--h-ink)));
	--c-border-strong: light-dark(#d5ccbd, oklch(40% 0.018 var(--h-ink)));

	/* ── Текст ─────────────────────────────────────────────── */
	--c-text:       light-dark(#1c1a17, oklch(95% 0.008 85));
	--c-text-muted: light-dark(#6a645b, oklch(73% 0.012 var(--h-ink)));
	--c-text-soft:  light-dark(#938b80, oklch(60% 0.012 var(--h-ink)));

	/* ── Статусы записей (accent|blue|warning|danger|muted) ── */
	--st-accent:  light-dark(oklch(52% 0.13 var(--h-ink)), oklch(74% 0.115 var(--h-ink)));
	--st-blue:    light-dark(oklch(53% 0.115 235), oklch(76% 0.10 235));
	--st-warning: light-dark(oklch(58% 0.13 var(--h-warm)), oklch(78% 0.125 var(--h-warm)));
	--st-danger:  light-dark(oklch(53% 0.175 25), oklch(72% 0.15 25));
	--st-muted:   light-dark(#8b8378, oklch(65% 0.012 var(--h-ink)));

	/* Затемнение под модалками/панелями. Отдельный токен, потому что «затемнить»
	   в тёмной теме нельзя цветом текста — он там почти белый и даёт засветку. */
	--c-overlay: light-dark(
		color-mix(in srgb, var(--c-text) 42%, transparent),
		color-mix(in srgb, oklch(10% 0.01 var(--h-ink)) 74%, transparent)
	);

	/* Просмотрщик изображений: одинаково тёмный в обеих темах — фотографию
	   смотрят на нейтрально-тёмном фоне, «бумажная» подложка тут мешает. */
	--c-lb-scrim:    color-mix(in srgb, oklch(12% 0.012 var(--h-ink)) 90%, transparent);
	--c-lb-surface:  color-mix(in srgb, oklch(22% 0.014 var(--h-ink)) 78%, transparent);
	--c-lb-ink:      oklch(96% 0.006 85);
	--c-lb-ink-soft: oklch(76% 0.012 var(--h-ink));

	/* Текущий статус: модификатор is-* на карточке переопределяет --st */
	--st: var(--st-muted);
	--st-soft: color-mix(in srgb, var(--st) 12%, transparent);

	/* ── Тени (тёплый подтон вместо синего) ────────────────── */
	--sh-sm: 0 1px 2px rgba(41, 34, 24, .05), 0 1px 3px rgba(41, 34, 24, .06);
	--sh-md: 0 4px 12px rgba(41, 34, 24, .07), 0 2px 4px rgba(41, 34, 24, .05);
	--sh-lg: 0 16px 40px rgba(41, 34, 24, .11), 0 4px 12px rgba(41, 34, 24, .05);
	--sh-ring: 0 0 0 3px var(--c-primary-ring);

	/* ── Радиусы ───────────────────────────────────────────── */
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 18px;
	--r-xl: 24px;
	--r-ctl: 10px;   /* кнопки, поля */
	--r-pill: 999px;

	/* ── Типографика ───────────────────────────────────────── */
	--ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ff-display: "Literata", Georgia, "Times New Roman", "PT Serif", serif;
	--ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-md: 14px;
	--fs-base: 15px;
	--fs-lead: clamp(16px, 1.4vw, 18px);
	--fs-h3: clamp(18px, 1.6vw, 21px);
	--fs-h2: clamp(23px, 2.6vw, 31px);
	--fs-h1: clamp(29px, 4vw, 42px);
	--fs-display: clamp(34px, 5.4vw, 54px);

	/* ── Ритм ──────────────────────────────────────────────── */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 32px;
	--s-8: 44px;
	--s-9: 64px;
	--s-10: 96px;

	--gutter: clamp(16px, 3vw, 24px);
	--container: 1200px;
	--container-narrow: 820px;
	--section-y: clamp(48px, 6.5vw, 88px);
	--header-h: 64px;

	/* ── Движение ──────────────────────────────────────────── */
	--t-fast: 120ms;
	--t: 200ms;
	--t-slow: 380ms;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-out: cubic-bezier(.16, .84, .32, 1);

	/* ── Слои ──────────────────────────────────────────────── */
	--z-header: 100;
	--z-overlay: 200;
	--z-panel: 210;
	--z-search: 300;

	/* ── Бумажная текстура (только hero / band / cta, очень слабо) ── */
	--paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Принудительная тема (перебивает prefers-color-scheme) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Глубокие тени на тёмном фоне */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sh-sm: 0 1px 2px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .28);
		--sh-md: 0 4px 12px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .28);
		--sh-lg: 0 16px 40px rgba(0, 0, 0, .50), 0 4px 12px rgba(0, 0, 0, .30);
	}
}
:root[data-theme="dark"] {
	--sh-sm: 0 1px 2px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .28);
	--sh-md: 0 4px 12px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .28);
	--sh-lg: 0 16px 40px rgba(0, 0, 0, .50), 0 4px 12px rgba(0, 0, 0, .30);
}

/* Цветовые модификаторы статуса — ставятся на корень карточки/строки */
.is-accent  { --st: var(--st-accent); }
.is-blue    { --st: var(--st-blue); }
.is-warning { --st: var(--st-warning); }
.is-danger  { --st: var(--st-danger); }
.is-muted   { --st: var(--st-muted); }
.is-accent, .is-blue, .is-warning, .is-danger, .is-muted {
	--st-soft: color-mix(in srgb, var(--st) 12%, transparent);
}