/* =========================================
   2. ЦВЕТА И "КИСТОЧКА" (colors.css)
========================================= */
:root {
    /* 1. Фундамент вайба (переопределяется в проектах) */
    --base: #64748b;     /* Несущий цвет (например, нейтрально-сизый) */
    --accent: #0ea5e9;   /* Акцент (яркий синий для кнопок и переключателей) */

    /* 2. Авто-генерация палитры страницы от --base */
    /* Фон страницы: 5% несущего цвета + 95% белого (дает легкий оттенок вайба) */
    --bg-page: color-mix(in srgb, var(--base) 5%, white);

    /* Карточки: абсолютно белые или с 1% вайба для мягкости */
    --bg-card: #ffffff;

    /* Бордеры: 20% несущего цвета + 80% белого (идеально в тон) */
    --bd-base: color-mix(in srgb, var(--base) 20%, white);

    /* Текст: смешиваем базу с черным, чтобы текст не был инородно-черным */
    --text-main: color-mix(in srgb, var(--base) 30%, black); /* Темный, читаемый */
    --text-mut: color-mix(in srgb, var(--base) 70%, black);  /* Приглушенный */
}

/* Семантические фоны и текст */
.bg-page { background-color: var(--bg-page); }
.bg-card { background-color: var(--bg-card); }
.c-text  { color: var(--text-main); }
.c-mut   { color: var(--text-mut); }

/* --- ПАЛИТРЫ (Макаем кисточку: --c) --- */
.set-base   { --c: var(--base); }
.set-accent { --c: var(--accent); }

/* Статусные и жесткие цвета */
.set-red    { --c: #ef4444; }
.set-green  { --c: #22c55e; }
.set-blue   { --c: #3b82f6; }
.set-yellow { --c: #eab308; }
.set-orange { --c: #f97316; }
.set-gray   { --c: #6b7280; }
.set-white  { --c: #ffffff; }
.set-black  { --c: #000000; }

/* --- АППЛИКАТОРЫ (Применяем цвет --c) --- */
/* 1. Заливка (Backgrounds) */
.bg-c { background-color: var(--c); }

/* Прозрачность (Alpha) */
.bg-c-a5  { background-color: color-mix(in srgb, var(--c) 5%, transparent); }
.bg-c-a10 { background-color: color-mix(in srgb, var(--c) 10%, transparent); }
.bg-c-a20 { background-color: color-mix(in srgb, var(--c) 20%, transparent); }
.bg-c-a40 { background-color: color-mix(in srgb, var(--c) 40%, transparent); }

/* К белому (Осветление) */
.bg-c-w20 { background-color: color-mix(in srgb, var(--c), white 20%); }
.bg-c-w40 { background-color: color-mix(in srgb, var(--c), white 40%); }
.bg-c-w60 { background-color: color-mix(in srgb, var(--c), white 60%); }
.bg-c-w80 { background-color: color-mix(in srgb, var(--c), white 80%); }

/* К черному (Затемнение) */
.bg-c-b20 { background-color: color-mix(in srgb, var(--c), black 20%); }
.bg-c-b40 { background-color: color-mix(in srgb, var(--c), black 40%); }
.bg-c-b60 { background-color: color-mix(in srgb, var(--c), black 60%); }
.bg-c-b80 { background-color: color-mix(in srgb, var(--c), black 80%); }

/* 2. Текст (Text Color) */
.tc-c     { color: var(--c); }
.tc-c-a40 { color: color-mix(in srgb, var(--c) 40%, transparent); }
.tc-c-b40 { color: color-mix(in srgb, var(--c), black 40%); }
.tc-white { color: #fff; }
.tc-black { color: #000; }

/* 3. Бордеры (Border Color) */
.bc-c     { border-color: var(--c); }
.bc-c-a20 { border-color: color-mix(in srgb, var(--c) 20%, transparent); }
.bc-c-a40 { border-color: color-mix(in srgb, var(--c) 40%, transparent); }

/* 4. Интерактив (Ховеры) */
.h-bg-c:hover     { background-color: var(--c); cursor: pointer; }
.h-bg-c-w10:hover { background-color: color-mix(in srgb, var(--c), white 10%); cursor: pointer; }
.h-bg-c-b10:hover { background-color: color-mix(in srgb, var(--c), black 10%); cursor: pointer; }
.h-bg-c-b20:hover { background-color: color-mix(in srgb, var(--c), black 20%); cursor: pointer; }
.h-tc-c:hover     { color: var(--c); }