/**
 * Design Tokens — единая дизайн-система MyFanClub
 * Подключается глобально, ВСЕ CSS-файлы опираются на эти переменные.
 *
 * Цветовая палитра — лаконичная светлая (как Telegram/YouTube):
 *   - primary:  #4a90d9 (холодный синий, читабельный)
 *   - accent:   #667eea → #764ba2 (градиент для hero/CTA)
 *   - surface:  layered whites для глубины
 *   - text:     почти-чёрный с мягкими secondary
 *
 * Шкала spacing: 4px base, 8 уровней (4, 8, 12, 16, 24, 32, 48, 64).
 * Шкала radius: 4, 8, 12, 16, 24, 999 (pill).
 * Шкала shadow: 5 уровней мягких теней.
 *
 * Mobile-first: переменные фиксированы, медиа-запросы в компонентах.
 */

:root {
    /* ===== Color: Base ===== */
    --c-bg:           #f5f7fa;
    --c-bg-elevated:  #ffffff;
    --c-surface:      #fafbfc;
    --c-surface-2:    #f1f3f6;

    /* ===== Color: Text ===== */
    --c-text:         #1a2332;
    --c-text-muted:   #6b7c8e;
    --c-text-soft:    #9aa5b4;
    --c-text-invert:  #ffffff;

    /* ===== Color: Brand ===== */
    --c-primary:      #4a90d9;
    --c-primary-hover:#3a7bc8;
    --c-primary-soft: rgba(74, 144, 217, 0.1);
    --c-primary-grad: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);

    /* Stihi blue (used by .stihi-tabs, .profile-tabs, profile-mini, club cards, music track play btn) */
    --c-stihi:        #1e88e5;
    --c-stihi-light:  #42a5f5;
    --c-stihi-grad:   linear-gradient(135deg, var(--c-stihi-light) 0%, var(--c-stihi) 100%);
    --c-stihi-grad-h: linear-gradient(90deg, var(--c-stihi-light) 0%, var(--c-stihi) 100%);
    --c-stihi-soft:   rgba(66, 165, 245, 0.08);
    --c-stihi-shadow: 0 2px 6px rgba(30, 136, 229, 0.25);

    --c-accent-start: #667eea;
    --c-accent-end:   #764ba2;
    --c-accent-grad:  linear-gradient(135deg, var(--c-accent-start) 0%, var(--c-accent-end) 100%);

    /* ===== Color: Status ===== */
    --c-success:      #22c55e;
    --c-warning:      #f59e0b;
    --c-danger:       #ef4444;
    --c-info:         #3b82f6;

    /* ===== Color: Borders & Dividers ===== */
    --c-border:       rgba(0, 0, 0, 0.06);
    --c-border-strong:rgba(0, 0, 0, 0.12);
    --c-divider:      rgba(0, 0, 0, 0.04);

    /* ===== Color: Overlays ===== */
    --c-overlay:      rgba(0, 0, 0, 0.5);
    --c-overlay-soft: rgba(0, 0, 0, 0.25);
    --c-glass:        rgba(255, 255, 255, 0.85);
    --c-glass-dark:   rgba(0, 0, 0, 0.4);

    /* ===== Spacing (4px base) ===== */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;

    /* ===== Radius ===== */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* ===== Shadows ===== */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-2: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sh-3: 0 4px 16px rgba(0, 0, 0, 0.08);
    --sh-4: 0 8px 32px rgba(0, 0, 0, 0.12);
    --sh-5: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* ===== Typography ===== */
    --ff-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;

    --fs-xs:  11px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --fs-4xl: 36px;

    --lh-tight:  1.25;
    --lh-base:   1.5;
    --lh-loose:  1.75;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ===== Layout ===== */
    --layout-max:        1280px;
    --layout-narrow:     960px;
    --sidebar-width:     280px;
    --sidebar-collapsed: 64px;
    --header-height:     56px;
    --bottom-bar-height: 56px;   /* mobile bottom-nav */

    /* ===== Motion ===== */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-fast:   150ms;
    --dur-base:   250ms;
    --dur-slow:   400ms;
    --dur-slower: 600ms;

    /* ===== Z-index scale ===== */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-header:    300;
    --z-overlay:   1000;
    --z-modal:     2000;
    --z-toast:     3000;
}



/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast:   0ms;
        --dur-base:   0ms;
        --dur-slow:   0ms;
        --dur-slower: 0ms;
    }
}