/* =====================================================
   🌟 BOOKISH DESIGN SYSTEM - FIBONACCI GOLDEN RATIO
   Единая система переменных для всех стилей сайта
   φ = 1.618 (золотое сечение)
   ===================================================== */

   :root {
    /* ========================================
       FIBONACCI CORE - Базовая шкала
       ======================================== */
    --phi: 1.618;
    --phi-inverse: 0.618;
    
    /* Прогрессия Фибоначчи (каждое = предыдущее × φ) */
    --fib-xs: 0.618rem;     /* ~10px - φ⁻¹ */
    --fib-sm: 1rem;         /* 16px - БАЗА */
    --fib-md: 1.618rem;     /* ~26px - φ¹ */
    --fib-lg: 2.618rem;     /* ~42px - φ² */
    --fib-xl: 4.236rem;     /* ~68px - φ³ */
    --fib-2xl: 6.854rem;    /* ~110px - φ⁴ */
    
    /* ========================================
       SPACING - Отступы по Фибоначчи
       ======================================== */
    --space-0: 0;
    --space-1: var(--fib-xs);            /* 10px */
    --space-2: var(--fib-sm);            /* 16px */
    --space-3: var(--fib-md);            /* 26px */
    --space-4: var(--fib-lg);            /* 42px */
    --space-5: var(--fib-xl);            /* 68px */
    --space-6: var(--fib-2xl);           /* 110px */
    
    /* Микро-отступы */
    --space-half: 0.5rem;                /* 8px */
    --space-quarter: 0.25rem;            /* 4px */
    
    /* Алиасы для совместимости */
    --spacing-xs: var(--space-quarter);  /* 4px */
    --spacing-sm: var(--space-half);     /* 8px */
    --spacing-md: var(--space-2);        /* 16px */
    --spacing-lg: 1.5rem;                /* 24px */
    --spacing-xl: 2rem;                  /* 32px */
    
    /* Cart-specific spacing */
    --cart-space-1: var(--space-1);      /* 10px */
    --cart-space-2: var(--space-2);      /* 16px */
    --cart-space-3: var(--space-3);      /* 26px */
    --cart-space-4: var(--space-4);      /* 42px */
    --cart-space-5: var(--space-5);      /* 68px */
    --cart-space-6: var(--space-6);      /* 110px */
    
    /* Footer spacing */
    --footer-space: 0.875rem;            /* 14px */
    
    /* ========================================
       TYPOGRAPHY - Типографика
       ======================================== */
    /* Font sizes по Фибоначчи */
    --font-size-xs: var(--fib-xs);       /* 10px */
    --font-size-sm: 0.875rem;            /* 14px */
    --font-size-base: var(--fib-sm);     /* 16px - БАЗА */
    --font-size-md: var(--fib-md);       /* 26px */
    --font-size-lg: var(--fib-lg);       /* 42px */
    --font-size-xl: var(--fib-xl);       /* 68px */
    
    /* Line heights */
    --line-height-tight: 1.2;            /* Заголовки */
    --line-height-base: 1.5;             /* Основной текст */
    --line-height-phi: 1.618;            /* φ - идеал */
    --line-height-relaxed: 1.75;         /* Длинный текст */
    
    /* ========================================
       BORDER RADIUS - Скругления
       ======================================== */
    --radius-xs: 2px;                    /* 16/8 */
    --radius-sm: 4px;                    /* 16/4 */
    --radius-md: 8px;                    /* 16/2 */
    --radius-lg: 16px;                   /* база */
    --radius-xl: 26px;                   /* φ от базы */
    --radius-full: 9999px;               /* круг */
    
    /* Алиасы */
    --border-radius-sm: var(--radius-sm);
    --border-radius: var(--radius-md);
    --border-radius-lg: 12px;            /* компромисс */
    --border-radius-xl: var(--radius-lg);
    --border-radius-full: var(--radius-full);
    
    /* Cart-specific */
    --cart-radius-sm: var(--radius-sm);
    --cart-radius-md: var(--radius-md);
    --cart-radius-lg: var(--border-radius-lg);
    
    /* ========================================
       SHADOWS - Тени по Фибоначчи
       ======================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 26px rgba(0, 0, 0, 0.18);
    --shadow-2xl: 0 26px 42px rgba(0, 0, 0, 0.2);
    
    /* Apple Books style shadows - м'які та елегантні */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-sidebar: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-sidebar-hover: 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 26px rgba(0, 0, 0, 0.18);
    --shadow-2xl: 0 26px 42px rgba(0, 0, 0, 0.2);
    
    /* Primary color shadows */
    --shadow-primary: 0 4px 12px rgba(190, 0, 60, 0.3);
    --shadow-primary-hover: 0 6px 16px rgba(190, 0, 60, 0.4);
    
    /* Cart shadows */
    --cart-shadow-sm: var(--shadow-xs);
    --cart-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --cart-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Liquid glass shadows */
    --liquid-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --liquid-glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --liquid-glass-blur: 20px;
    
    /* ========================================
       COLORS - Цветовая палитра
       ======================================== */
    /* Primary */
    --color-primary: #be003c;
    --color-primary-hover: #9e0032;
    --color-primary-light: rgba(190, 0, 60, 0.1);
    
    /* Text */
    --color-text: #222222;
    --color-text-muted: #666666;
    --color-text-light: #888888;
    
    /* Backgrounds */
    --color-bg: #ffffff;
    --color-bg-alt: #f8f8f8;
    --color-bg-dark: #1a1a1a;
    
    /* Borders */
    --color-border: #e5e5e5;
    --color-border-light: #f2f2f2;
    
    /* Status colors */
    --color-success: #28a745;
    --color-error: #e62222;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    
    /* Cart-specific colors */
    --cart-bg: var(--color-bg);
    --cart-bg-alt: var(--color-bg-alt);
    --cart-text: var(--color-text);
    --cart-text-muted: var(--color-text-muted);
    --cart-text-secondary: var(--color-text-light);
    --cart-border: var(--color-border);
    --cart-primary: var(--color-primary);
    --cart-success: var(--color-success);
    --cart-error: var(--color-error);
    
    /* ========================================
       TRANSITIONS - Анимации по Фибоначчи
       ======================================== */
    --duration-instant: 100ms;           /* Быстро */
    --duration-fast: 160ms;              /* φ × 100 */
    --duration-base: 260ms;              /* φ² × 100 */
    --duration-slow: 420ms;              /* φ³ × 100 */
    --duration-slower: 680ms;            /* φ⁴ × 100 */
    
    /* Easing functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* Apple Books плавність */
    
    /* Transition presets */
    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-base: var(--duration-base) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
    
    /* Cart transitions */
    --cart-transition-fast: 120ms var(--ease-in-out);
    --cart-transition-base: 200ms var(--ease-in-out);
    
    /* ========================================
       SIZES - Размеры элементов
       ======================================== */
    /* Icons */
    --size-icon-sm: 16px;                /* база */
    --size-icon-md: 26px;                /* φ */
    --size-icon-lg: 42px;                /* φ² */
    
    /* Buttons & Inputs */
    --size-button-height: 42px;          /* φ² */
    --size-input-height: 42px;           /* φ² */
    --touch-target-min: 44px;            /* accessibility */
    
    /* Containers */
    --container-xs: 656px;               /* 16 × 41 */
    --container-sm: 832px;               /* 16 × 52 */
    --container-md: 1024px;              /* 2¹⁰ */
    --container-lg: 1088px;              /* 16 × 68 */
    --container-xl: 1280px;              /* 16 × 80 */
    
    /* Sidebar */
    --sidebar-width: 380px;              /* Apple Books стиль */
    --sidebar-width-sm: 320px;           /* Мобільна версія */
    
    /* ========================================
       Z-INDEX - Слои
       ======================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-max: 9999;
    
    /* ========================================
       GRID & GAP
       ======================================== */
    --gap-1: var(--space-1);             /* 10px */
    --gap-2: var(--space-2);             /* 16px */
    --gap-3: var(--space-3);             /* 26px */
    --gap-4: var(--space-4);             /* 42px */
  }
  
  /* ========================================
     MEDIA QUERIES - Responsive breakpoints
     ======================================== */
  @media (max-width: 768px) {
    :root {
      --liquid-glass-blur: 15px;
    }
  }
  
  /* ========================================
     UTILITY CLASSES - Быстрое применение
     ======================================== */
  
  /* Spacing utilities */
  .p-fib-1 { padding: var(--space-1) !important; }
  .p-fib-2 { padding: var(--space-2) !important; }
  .p-fib-3 { padding: var(--space-3) !important; }
  .p-fib-4 { padding: var(--space-4) !important; }
  
  .m-fib-1 { margin: var(--space-1) !important; }
  .m-fib-2 { margin: var(--space-2) !important; }
  .m-fib-3 { margin: var(--space-3) !important; }
  .m-fib-4 { margin: var(--space-4) !important; }
  
  /* Typography utilities */
  .text-fib-xs { font-size: var(--font-size-xs) !important; }
  .text-fib-sm { font-size: var(--font-size-sm) !important; }
  .text-fib-base { font-size: var(--font-size-base) !important; }
  .text-fib-md { font-size: var(--font-size-md) !important; }
  .text-fib-lg { font-size: var(--font-size-lg) !important; }
  
  .leading-tight { line-height: var(--line-height-tight) !important; }
  .leading-base { line-height: var(--line-height-base) !important; }
  .leading-phi { line-height: var(--line-height-phi) !important; }
  
  /* Radius utilities */
  .rounded-fib-sm { border-radius: var(--radius-sm) !important; }
  .rounded-fib-md { border-radius: var(--radius-md) !important; }
  .rounded-fib-lg { border-radius: var(--radius-lg) !important; }
  
  /* Gap utilities */
  .gap-fib-1 { gap: var(--gap-1) !important; }
  .gap-fib-2 { gap: var(--gap-2) !important; }
  .gap-fib-3 { gap: var(--gap-3) !important; }
  .gap-fib-4 { gap: var(--gap-4) !important; }
  
  /* ========================================
     ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ
     ======================================== */
  /*
  ТИПОГРАФИКА:
    h1 { font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
    h2 { font-size: var(--font-size-lg); }
    h3 { font-size: var(--font-size-md); }
    p  { font-size: var(--font-size-base); line-height: var(--line-height-phi); }
  
  ОТСТУПЫ:
    .card { padding: var(--space-3); margin-bottom: var(--space-2); }
    .button { padding: var(--space-2) var(--space-3); }
  
  РАЗМЕРЫ:
    .icon { width: var(--size-icon-md); height: var(--size-icon-md); }
    .button { min-height: var(--size-button-height); border-radius: var(--radius-md); }
  
  ТЕНИ:
    .card { box-shadow: var(--shadow-md); }
    .card:hover { box-shadow: var(--shadow-lg); }
  
  ЦВЕТА:
    .primary-btn { background: var(--color-primary); color: var(--color-bg); }
    .text-muted { color: var(--color-text-muted); }
  
  TRANSITIONS:
    .smooth { transition: all var(--transition-base); }
    .fast-hover:hover { transition: transform var(--transition-fast); }
  */