/*
 * Tokeny systemu wizualnego hosti24 (zgodne z /pomoc i /blog, opis w CLAUDE.md).
 * Komponenty używają wyłącznie tych zmiennych, dzięki czemu ciemny motyw
 * będzie wymagał tylko drugiego zestawu wartości (np. pod [data-theme="dark"]).
 */
:root {
    /* tekst: tylko dwa odcienie */
    --h24-heading: #2e3049;
    --h24-text: #545874;

    /* marka i akcenty */
    --h24-brand: #6556e7;
    --h24-turquoise: #36beca;
    --h24-turquoise-light: #5fd6de;
    --h24-pink: #e65dd1;
    --h24-blue: #1f75cb;

    /* tła */
    --h24-page-bg: #f5f6fa;
    --h24-card-bg: #fff;
    --h24-icon-bg: #e0ddfa;
    --h24-active-bg: #e9e7fc;
    --h24-hover-bg: #f3f2fd;
    --h24-lavender-from: #f6f5fe;
    --h24-lavender-to: #efedfc;
    --h24-divider: #eeedf6;
    --h24-tag-bg: #e0f5f7;
    --h24-tag-text: #177f89;
    --h24-pink-bg: #fbe1f6;
    --h24-blue-bg: #dcebfb;
    --h24-search-border: #ecebf7;
    --h24-border: #eaecf4;
    --h24-disabled-bg: #e6e7ee;     /* przycisk nieaktywny */
    --h24-disabled-text: #545874;

    /* kształt i ruch */
    --h24-radius: 16px;
    --h24-radius-small: 10px;
    --h24-shadow: 0 10px 30px rgba(46, 48, 73, .06);
    --h24-shadow-hover: 0 16px 36px rgba(46, 48, 73, .12);
    --h24-shadow-button: 5px 5px 5px rgba(101, 86, 231, .4);
    --h24-shadow-button-turquoise: 5px 5px 5px rgba(54, 190, 202, .4);
    --h24-shadow-search: 0 12px 32px -14px rgba(101, 86, 231, .35);
    --h24-transition: .22s ease;
}