/**
 * Токены кабинета my.upterio.shop (psmy-75).
 * Значения — с листа «Компоненти» дизайн-полотна редизайна.
 * Принцип: цвет означает состояние, графит означает действие и «вы здесь».
 */
:root{
    /* шрифты: самохостинг, см. css/fonts/*.font.css */
    --c-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --c-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    /* графит и поверхности */
    --c-ink: #1F2933;
    --c-ink-2: #323F4B;
    --c-ink-3: #3E4C59;
    --c-canvas: #F4F6F8;
    --c-surface: #FFFFFF;
    --c-surface-2: #F9FAFB;
    --c-line: #E4E7EB;
    --c-line-2: #CBD2D9;

    /* текст */
    --c-text: #1F2933;
    --c-text-2: #616E7C;
    --c-text-3: #7B8794;
    --c-text-4: #9AA5B1;

    /* тёмная панель */
    --c-side-bg: var(--c-ink);
    --c-side-active: var(--c-ink-2);
    --c-side-text: #CBD2D9;
    --c-side-muted: #9AA5B1;
    --c-side-line: #3E4C59;

    /* акцент бренда: из логотипа, одна главная кнопка на экране */
    --c-accent: #F59E0B;
    --c-accent-soft: #FEF3C7;
    --c-accent-text: #92400E;
    --c-link: #B45309;
    --c-link-hover: #92400E;

    /* состояния */
    --c-ok: #14B8A6;
    --c-ok-soft: #CCFBF1;
    --c-ok-text: #0F766E;
    --c-warn: #F59E0B;
    --c-warn-soft: #FEF3C7;
    --c-warn-text: #B45309;
    --c-bad: #DC2626;
    --c-bad-soft: #FEE2E2;
    --c-bad-text: #B91C1C;
    --c-info: #3B82F6;
    --c-info-soft: #DBEAFE;
    --c-info-text: #1D4ED8;

    /* геометрия */
    --c-focus: 0 0 0 3px rgba(31, 41, 51, 0.12);
    --c-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
    --c-r-s: 4px;
    --c-r: 6px;
    --c-r-l: 8px;
    --c-ctl-s: 30px;
    --c-ctl: 36px;
    --c-ctl-l: 44px;
    --c-row: 40px;
    --c-row-dense: 36px;
    --c-thead: 32px;

    /* оболочка */
    --c-side-w: 224px;
    --c-side-w-narrow: 56px;
    --c-top-h: 48px;
    --c-mhead-h: 56px;
    --c-msite-h: 44px;
    --c-mtabs-h: 64px;
    --c-pad: 24px;
    --c-gap: 16px;

    /* типографика */
    --c-fs: 13px;
    --c-fs-s: 12.5px;
    --c-fs-xs: 12px;
    --c-fs-caps: 11px;
    --c-fs-h1: 20px;
    --c-fs-mono: 12.5px;
    --c-lh: 1.45;

    /*
     * Мост к переменным движка (common/public/css/scheme/light.css).
     * Виджеты и шаблоны модулей читают их, поэтому переопределяем значениями кабинета,
     * а не заводим второй словарь в шаблонах.
     */
    --font-family-default: var(--c-font);
    --font-family-h: var(--c-font);
    --primary-text-color: var(--c-text);
    --secondary-text-color: var(--c-text-2);
    --accent-text-color: var(--c-link);
    --accent-light-text-color: var(--c-text);
    --content-text-color: var(--c-text);
    --dropdown-text-color: var(--c-text);
    --disabled-text-color: var(--c-text-4);
    --basic-background-color: var(--c-canvas);
    --content-background-color: var(--c-surface);
    --content2-background-color: var(--c-surface);
    --content3-background-color: var(--c-surface-2);
    --primary-background-color: var(--c-ink);
    --primary-light-background-color: var(--c-canvas);
    --accent-background-color: var(--c-ink-2);
    --accent-light-background-color: var(--c-line-2);
    --warn-background-color: var(--c-bad);
    --warn-light-background-color: var(--c-bad-soft);
    --warn-text-color: var(--c-bad-text);
    --warn-light-text-color: var(--c-bad-text);
    --highlight-background-color: var(--c-ok);
    --highlight-text-color: var(--c-ok-text);
    --green-text-color: var(--c-ok-text);
    --red-text-color: var(--c-bad-text);
    --blue-text-color: var(--c-info-text);
    --hover2-background-color: var(--c-surface-2);
    --hover3-background-color: var(--c-surface-2);
    --icon-color: var(--c-text-2);
    --icon2-color: var(--c-text-3);
    --control-border-color: var(--c-line-2);
    --control-accent-border-color: var(--c-ink);
    --content-border-color: var(--c-line);
    --fieldblock-warn-border-color: var(--c-bad);
    --header-background-color: var(--c-ink);
    --shadow-raised: var(--c-shadow);
}