/* ═══════════════════════════════════════════════════════════
   Studio2Prod Design Tokens
   Modern Enterprise SaaS — Design System v1
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ── Цвета ─────────────────────────────────────────────── */
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-light: #EFF6FF;
    --color-primary-subtle: #DBEAFE;
    --color-primary-dark: #1E40AF;

    --color-success: #16A34A;
    --color-success-light: #F0FDF4;
    --color-danger: #DC2626;
    --color-danger-light: #FEF2F2;
    --color-warning: #D97706;
    --color-warning-light: #FFFBEB;
    --color-info: #2563EB;
    --color-info-light: #EFF6FF;
    --color-purple: #7C3AED;
    --color-purple-light: #F5F3FF;

    /* ── Фоны ──────────────────────────────────────────────── */
    --bg-page: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F1F5F9;
    --bg-sidebar: #0F172A;
    --bg-sidebar-hover: #1E293B;
    --bg-sidebar-active: #2563EB;
    --bg-header: #FFFFFF;
    --bg-muted: #F1F5F9;

    /* ── Текст ─────────────────────────────────────────────── */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;
    --text-link: #2563EB;

    /* ── Границы ───────────────────────────────────────────── */
    --border-default: #E2E8F0;
    --border-subtle: #F1F5F9;
    --border-focus: #2563EB;

    /* ── Отступы (8pt grid) ────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Скругления ────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 9999px;

    /* ── Тени ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* ── Переходы ──────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* ── Layout ────────────────────────────────────────────── */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --header-height: 56px;
}