/*
 KURS UI DESIGN TOKENS
 Общая геометрия для Light / Dark / Joyfull.
 Цвета определяются отдельно для каждой темы.
*/

:root {
    /* Типографика */
    --kurs-font-ui: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Arial, Helvetica, sans-serif;

    --kurs-text-base: 16px;
    --kurs-text-small: 13px;
    --kurs-text-label: 12px;
    --kurs-text-button: 14px;
    --kurs-text-field: 15px;
    --kurs-line-height: 1.55;

    /* Единая шкала отступов */
    --kurs-space-1: 4px;
    --kurs-space-2: 8px;
    --kurs-space-3: 12px;
    --kurs-space-4: 16px;
    --kurs-space-5: 20px;
    --kurs-space-6: 24px;
    --kurs-space-8: 32px;

    /* Геометрия */
    --kurs-button-padding-y: var(--kurs-space-2);
    --kurs-button-padding-x: var(--kurs-space-4);
    --kurs-control-height: 42px;
    --kurs-control-compact-height: 32px;
    --kurs-control-radius: 8px;
    --kurs-card-radius: 12px;
    /* Компоненты общего каркаса KURS */
    --kurs-page-kicker-padding: 6px 13px;
    --kurs-page-kicker-radius: 999px;
    --kurs-page-kicker-line-height: 1.35;
    --kurs-tree-heading-height: 38px;
    --kurs-tree-heading-radius: 10px;
    --kurs-tree-row-radius: 8px;
    --kurs-player-radius: var(--kurs-card-radius);
    --kurs-player-play-size: 42px;
    --kurs-player-play-compact: 30px;
    --kurs-player-gap: 10px;
    --kurs-player-padding: 7px 10px;
    --kurs-player-track-height: 5px;
    --kurs-player-thumb-size: 13px;
    --kurs-player-time-size: 13px;

    --kurs-ui-border-width: 1px;
    --kurs-ui-label-weight: 900;
    --kurs-ui-focus-outline-width: 2px;

    /* Публичные страницы: те же общие размеры, что и в кабинете */
    --kurs-public-radius: var(--kurs-card-radius);
    --kurs-public-inner-radius: var(--kurs-control-radius);
    --kurs-public-border-width: var(--kurs-ui-border-width);
    --kurs-public-gap: var(--kurs-space-3);
    --kurs-public-card-inset: 18px;
    --kurs-public-heading-padding: 22px 24px;
    --kurs-public-title-size: clamp(25px, 3vw, 38px);
    --kurs-control-large-height: 48px;



    /* Навигация: общая геометрия всех тем */
    --kurs-nav-row-height: 48px;
    --kurs-nav-icon-size: 38px;
    --kurs-nav-image-size: 25px;
    --kurs-nav-radius: 12px;
    --kurs-nav-gap: 10px;

    /* Таблицы: одна сетка размеров для всех тем */
    --kurs-table-font-size: 14px;
    --kurs-table-line-height: 1.45;
    --kurs-table-cell-pad-y: 10px;
    --kurs-table-cell-pad-x: 12px;
    --kurs-table-cell-pad-mobile-y: 7px;
    --kurs-table-cell-pad-mobile-x: 5px;
    --kurs-table-border-width: 1px;
    --kurs-table-input-min-height: 32px;
    --kurs-table-score-radius: var(--kurs-card-radius);

}

/*
 Семантические цвета.
 Используем существующую палитру активной темы.
*/
.cabinet {
    --kurs-color-bg: var(--theme-bg);
    --kurs-color-surface: var(--theme-surface);
    --kurs-color-text: var(--theme-text);
    --kurs-color-muted: var(--theme-muted);
    --kurs-color-border: var(--theme-border);
}

.kurs-audio-player {
    --kurs-player-bg: var(--audio-bg);
    --kurs-player-text: var(--audio-text);
    --kurs-player-accent: var(--audio-accent);
    --kurs-player-track: var(--audio-track);
}