/*
 * Дизайн-токены Фономатики (docs/design_handoff_fonomatika/README.md).
 * Тёмная тема — по умолчанию; светлая — [data-theme="light"].
 * Акцент выбирается пользователем (переопределяет --accent/--accent-soft).
 */

:root {
    /* Тёмная тема (по умолчанию). Имена переменных — как в мастер-исходнике дизайна. */
    --bg: #131417;
    --bg-elevated: #1b1d22;
    --bg-hover: #23262d;
    --border: #2a2d35;
    --border-strong: #383c46;
    --text: #f4f5f7;
    --text-secondary: #a8adb8;
    --text-muted: #828892;
    --input-bg: #1f2127;
    --overlay: rgba(8, 9, 11, 0.72);
    --success: #34c076;
    --warning: #e0a940;
    --danger: #e0596b;

    /* Алиасы для обратной совместимости с ранее написанными компонентами */
    --surface: var(--bg-elevated);
    --surface-hover: var(--bg-hover);
    --scrim: var(--overlay);

    /* Акцент — фирменный синий Фономатики (из старого сайта) */
    --accent: #3498db;
    --accent-soft: #3498db26;
    --accent-contrast: #ffffff;

    /* Типографика */
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-page-title: 28px;
    --fs-section-title: 21px;
    --fs-card-title: 15px;
    --fs-body: 14.5px;
    --fs-meta: 13.5px;
    --fs-small: 12px;
    --fs-eyebrow: 11px;

    /* Радиусы */
    --radius-card: 16px;
    --radius-control: 10px;
    --radius-pill: 999px;

    /* Отступы и сетка */
    --pad-page: 32px;
    --pad-page-lg: 40px;
    --pad-page-mobile: 16px;
    --gap-grid: 20px;
    --gap-grid-mobile: 14px;
    --card-min: 200px;
    --card-min-mobile: 148px;

    /* z-index */
    --z-header: 100;
    --z-miniplayer: 200;
    --z-bottomnav: 200;
    --z-overlay: 900;
    --z-menu: 1000;

    /* Прочее */
    --transition: 0.16s ease;
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] {
    --bg: #f6f7f8;
    --bg-elevated: #ffffff;
    --bg-hover: #eef0f3;
    --border: #e3e5ea;
    --border-strong: #d3d6dc;
    --text: #1a1c20;
    --text-secondary: #565b66;
    --text-muted: #7d818c;
    --input-bg: #ffffff;
    --overlay: rgba(20, 22, 26, 0.45);
    --success: #1f9d5c;
    --warning: #b8790a;
    --danger: #d1394c;
    --shadow-card: 0 6px 20px rgba(20, 22, 26, 0.10);
}