/* ============================================================
   iSticker — Дизайн-токены (версия 2: "Clean Blue")
   ============================================================ */

:root {
    /* ==================== ЦВЕТА ==================== */

    /* Бренд — холодный синий (акцент референса) */
    --brand-50:  #EEF4FF;
    --brand-100: #E8F0FE;
    --brand-200: #D6E4FF;
    --brand-300: #A9C4FF;
    --brand-400: #2F6BFF;   /* основной акцент */
    --brand-500: #2458D6;
    --brand-600: #1B44A8;

    /* Нейтральные — холодная бумага / серо-белый */
    --paper-50:  #FFFFFF;   /* фон карточек */
    --paper-100: #F5F7FA;   /* фон приложения */
    --paper-200: #EEF1F6;   /* вторичный фон */
    --paper-300: #E5E9F0;   /* границы, разделители */
    --paper-400: #C7CEDB;   /* неактивные иконки */
    --paper-500: #9AA3B2;   /* placeholder, приглушённый текст */
    --paper-600: #5A6270;   /* вторичный текст */
    --paper-700: #3A4150;   /* текст средней важности */
    --paper-800: #1F2530;   /* почти чёрный */
    --paper-900: #1A1D23;   /* заголовки */

    /* Семантические */
    --success-50:  #E6F7EE;
    --success-500: #2FA96B;
    --success-700: #1E7A4A;

    --danger-50:  #FDE8E8;
    --danger-500: #EF4444;
    --danger-700: #B91C1C;

    --warning-50:  #FFF4E5;
    --warning-500: #F59E0B;
    --warning-700: #B45309;

    --info-50:  #E8F0FE;
    --info-500: #2F6BFF;
    --info-700: #1B44A8;

    /* Цвета тегов-проектов (для пилюль и точек) */
    --tag-work:     #2F6BFF;
    --tag-personal: #2FA96B;
    --tag-family:   #8B5CF6;
    --tag-health:   #F59E0B;
    --tag-finance:  #EF4444;
    --tag-growth:   #EC4899;

    /* ==================== SPACING ==================== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ==================== РАДИУСЫ ==================== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* ==================== ТЕНИ — холодные, мягкие ==================== */
    --shadow-xs: 0 1px 2px rgba(20, 30, 60, 0.04);
    --shadow-sm: 0 2px 8px rgba(20, 30, 60, 0.06);
    --shadow-md: 0 4px 16px rgba(20, 30, 60, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 30, 60, 0.10);
    --shadow-xl: 0 20px 60px rgba(20, 30, 60, 0.14);

    --shadow-paper: 0 1px 2px rgba(20, 30, 60, 0.04), 0 2px 8px rgba(20, 30, 60, 0.05);
    --shadow-sticker: 0 8px 20px rgba(47, 107, 255, 0.30);

    /* ==================== ТИПОГРАФИКА ==================== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ==================== АНИМАЦИИ ==================== */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 80ms;
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    /* ==================== РАЗМЕРЫ ==================== */
    --sidebar-width: 240px;
    --sidebar-width-mob: 260px;
    --content-max: 800px;
    --fab-size: 56px;
    --fab-size-mob: 56px;
    --touch-target: 44px;

    /* ==================== Z-INDEX ==================== */
    --z-base: 1;
    --z-sticky: 100;
    --z-fab: 500;
    --z-sidebar: 999;
    --z-overlay: 1000;
    --z-modal: 1000;
    --z-onboarding: 2000;
    --z-toast: 9999;
}

/* ============================================================
   АЛИАСЫ — версия 2: белый центр, серый сайдбар
   ============================================================ */
:root {
    /* Фон приложения — БЕЛЫЙ, лёгкий тёплый оттенок для карточек */
    --bg-app:        #FFFFFF;   /* общий фон приложения и центра */
    --bg-primary:    #FFFFFF;   /* карточки, модалки */
    --bg-secondary:  #F5F7FA;   /* САЙДБАР, правая колонка, вторичные блоки */
    --bg-hover:      #EEF1F6;   /* hover-состояния */
    --bg-elevated:   #FFFFFF;   /* модалки, popover */

    --text-primary:   var(--paper-900);
    --text-secondary: var(--paper-600);
    --border-color:   var(--paper-300);

    --accent-color: var(--brand-400);
    --accent-hover: var(--brand-500);
    --danger-color: var(--danger-500);
    --checkbox-border: var(--paper-400);

    --shadow: var(--shadow-sm);
    --shadow-fab: var(--shadow-lg);
    --transition: all var(--duration-base) var(--ease-out);

    /* Фон страницы — без текстуры, чистый белый */
    --paper-bg: #FFFFFF;
    --paper-texture: none;
    --paper-shadow: var(--shadow-paper);
}