/*
 * KosCare - токени (PLAN 5.1): ЕДИНСТВЕНОТО място със стойности на цветове, шрифтове, радиуси и
 * сенки. Източник: docs/TOKENS.md + <head> на makets/final/nachalna.html (ефективната тема =
 * `html.red .v-b` + `html.red .b-*`; синьото Б и --sw-* не влизат).
 *
 * Breakpoint-и (CSS променливи не работят в @media - стойностите, които ползват файловете):
 *   ≤1100 продукти 3 колони · ≤1000 дизайн (таблет) · ≤960 мобилен хедър, страничните колони
 *   падат · ≤900 пакети 1 колона · ≤720 продукти 2 колони · ≤640 дизайн (мобилен) · ≤600
 *   категорийни плочки 2 колони (допускане 9 + @media на дизайна: 1000/1080/760/700/640/600).
 */

:root {
	color-scheme: dark;

	/* Основни (html.red .v-b) */
	--kc-bg: rgb(11, 11, 13);
	--kc-surface: rgb(23, 23, 26);
	--kc-line: rgb(44, 44, 49);
	--kc-text: rgb(244, 244, 245);
	--kc-muted: rgb(168, 168, 176);
	--kc-accent: rgb(227, 18, 27);
	--kc-accent2: rgb(255, 77, 77);

	/* Допълнителни цветове от правилата html.red .b-* / .kc-* (docs/TOKENS.md → „Цветове") */
	--kc-accent-dark: rgb(163, 13, 19);      /* краищата на градиента на .b-top */
	--kc-accent-deep: rgb(196, 15, 23);      /* вторият цвят на градиента на .b-btn */
	--kc-logo-accent: rgb(227, 18, 27);      /* „Care" в логото (#e3121b) */
	--kc-head-bg: rgb(15, 15, 17);           /* .b-head */
	--kc-field-bg: rgb(28, 28, 32);          /* .b-search */
	--kc-placeholder: rgb(138, 138, 147);    /* placeholder на търсенето */
	--kc-nav-text: rgb(214, 214, 219);       /* .b-nav */
	--kc-li-text: rgb(217, 217, 222);        /* редовете на .b-pack */
	--kc-white: rgb(255, 255, 255);
	--kc-black: rgb(0, 0, 0);
	--kc-line-strong: rgb(61, 61, 68);       /* рамката на .b-btn.line */
	--kc-bar-bg: rgb(34, 34, 38);            /* .b-bar */
	--kc-float-bg: rgba(23, 23, 26, 0.85);   /* .b-float */
	--kc-float-line: rgb(58, 58, 64);
	--kc-img-bg: rgb(232, 235, 240);         /* светлият фон зад продуктовите снимки */
	--kc-star: rgb(255, 201, 74);            /* звездите на рейтинга */
	--kc-ok: rgb(95, 227, 154);              /* „Спестяваш", „В наличност" */
	--kc-out-badge: rgb(42, 42, 46);         /* .kc-badge-out (#2a2a2e) */
	--kc-flag-text: rgb(26, 4, 5);           /* текстът на .b-pack-flag */
	--kc-packs-bg: rgb(16, 16, 18);          /* .b-packs-wrap */
	--kc-foot-bg: rgb(8, 8, 10);             /* .b-foot */
	--kc-chat: rgb(115, 96, 242);            /* .b-chatbtn */
	--kc-tint-12: rgba(255, 77, 77, 0.12);   /* .b-pill */
	--kc-tint-08: rgba(255, 77, 77, 0.08);   /* .b-filters button.on */
	--kc-tint-06: rgba(255, 77, 77, 0.06);   /* пръстенът на .b-pack.best */
	--kc-glow-45: rgba(255, 77, 77, 0.45);   /* сиянието на .b-logo i */
	--kc-glow-red-35: rgba(227, 18, 27, 0.35); /* сянката на .b-btn */
	--kc-glow-red-20: rgba(227, 18, 27, 0.2);  /* сиянието на .b-packs-wrap */
	--kc-glow-chat: rgba(115, 96, 242, 0.45);  /* сянката на .b-chatbtn */
	--kc-shade-40: rgba(0, 0, 0, 0.4);       /* сянката на .b-pack.best; затъмнението зад мобилното меню */

	/* Шрифтове (Google Fonts - inc/setup.php зарежда само Exo 2 и Rubik) */
	--kc-display: "Exo 2", system-ui, sans-serif;
	--kc-body: "Rubik", system-ui, sans-serif;

	/* Радиуси */
	--kc-r-xs: 5px;
	--kc-r-sm: 10px;
	--kc-r: 12px;
	--kc-r-md: 14px;
	--kc-r-lg: 16px;
	--kc-r-xl: 18px;
	--kc-r-2xl: 20px;
	--kc-r-3xl: 24px;
	--kc-r-hero: 28px;
	--kc-r-pill: 999px;

	/* Сенки */
	--kc-shadow-btn: 0 10px 28px var(--kc-glow-red-35);
	--kc-shadow-best: 0 0 0 6px var(--kc-tint-06), 0 20px 50px var(--kc-shade-40);
	--kc-shadow-chat: 0 10px 30px var(--kc-glow-chat);
	--kc-shadow-logo: 0 0 18px var(--kc-glow-45);

	/* Мрежа (.b-wrap: 1240px, 24px; ≤640: 16px; между тях - fluid, допускане 9) */
	--kc-wrap: 1240px;
	--kc-gutter: clamp(16px, 4vw, 24px);

	/* Хедърът (sticky) - отместване на sticky колоните */
	--kc-sticky-top: 150px;
}