/* ═══════════════════════════════════════════════════════════════════════════
   HPD DESIGN SYSTEM - Main Entry Point

   This file imports all design system modules in the correct order.
   Include this single file in your HTML to get the complete design system.

   Architecture:
   ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS     - CSS custom properties (colors, spacing, typography)
   2. BASE       - Reset and foundational element styles
   3. NAVBAR     - Navigation component
   4. COMPONENTS - Reusable UI building blocks
   5. VENDORS    - Third-party library overrides
   6. UTILITIES  - Helper classes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layer 1: Design Tokens (CSS Variables) */
@import url('tokens.css?v=20251227');

/* Layer 2: Base Styles & Resets */
@import url('base.css?v=20251227');

/* Layer 3: Layout Components */
@import url('navbar.css?v=20251227');

/* Layer 4: UI Components */
@import url('components.css?v=20251227f');

/* Layer 5: Vendor Overrides */
@import url('vendors.css?v=20251228');

/* Layer 6: Utilities (last to allow overrides) */
@import url('utilities.css?v=20251227');


/* ═══════════════════════════════════════════════════════════════════════════
   QUICK REFERENCE
   ═══════════════════════════════════════════════════════════════════════════

   COLORS (use CSS variables):
   --color-bg-root        → #000000 (darkest)
   --color-bg-primary     → #0a0a0a
   --color-bg-secondary   → #111111
   --color-bg-elevated    → #171717
   --color-bg-hover       → #1a1a1a

   --color-text-primary   → #ededed
   --color-text-secondary → #a1a1a1
   --color-text-tertiary  → #6b6b6b

   --color-accent-solid   → #8b5cf6 (purple)
   --gradient-primary     → purple → cyan gradient

   STATUS COLORS:
   --color-success        → #22c55e (green)
   --color-error          → #ef4444 (red)
   --color-warning        → #eab308 (yellow)
   --color-info           → #06b6d4 (cyan)

   ═══════════════════════════════════════════════════════════════════════════
   REPLACING INLINE STYLES - Migration Guide
   ═══════════════════════════════════════════════════════════════════════════

   INSTEAD OF                          USE THIS CLASS
   ─────────────────────────────────────────────────────────────────────────────
   style="color: red"                  .status-icon--error (for icons)
                                       .status-text--error (for text)
   style="color: green"                .status-icon--success
   style="color: yellow"               .status-icon--warning
   style="color: grey"                 .status-icon--muted

   style="background-color: #D3FFBA"   .td-profit (table cells)
   style="background-color: #EEEDED"   .td-sum (table cells)
   style="background-color: orange"    .tr-header (table rows)

   style="display: none"               .form-hidden
   style="width: 100%"                 .w-full or .btn-block (buttons)
   style="text-align: center"          .text-center

   style="overflow-y: scroll;          .scroll-container .scroll-container--md
          height: 500px"

   style="border: 0"                   .input-borderless

   ═══════════════════════════════════════════════════════════════════════════
   STATUS CLASSES (new)
   ═══════════════════════════════════════════════════════════════════════════

   ICONS (FontAwesome):
   <i class="fa-solid fa-check status-icon--success"></i>
   <i class="fa-solid fa-times status-icon--error"></i>
   <i class="fa-solid fa-clock status-icon--warning"></i>
   <i class="fa-solid fa-info status-icon--info"></i>
   <i class="fa-solid fa-ban status-icon--muted"></i>

   TEXT:
   <span class="status-text--success">Оплачено</span>
   <span class="status-text--error">Отменено</span>

   BADGES:
   <span class="status-badge--success">Успешно</span>
   <span class="status-badge--error">Ошибка</span>
   <span class="status-badge--warning">Ожидание</span>

   MESSAGE BOXES:
   <div class="message-box">Нейтральное сообщение</div>
   <div class="message-box message-box--success">Успех!</div>
   <div class="message-box message-box--error">Ошибка!</div>

   ═══════════════════════════════════════════════════════════════════════════
   TABLE STYLING
   ═══════════════════════════════════════════════════════════════════════════

   <tr class="tr-header">...</tr>      Header row with gradient
   <td class="td-profit">...</td>      Profit column (green tint)
   <td class="td-sum">...</td>         Sum column (neutral)

   ═══════════════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════

   WIDTH:      .w-full, .w-fit, .w-70, .w-50, .w-30
   TEXT:       .text-left, .text-center, .text-right
   FLEX:       .flex-center, .flex-between, .flex-start
   SCROLL:     .scroll-container--sm (300px)
               .scroll-container--md (500px)
               .scroll-container--lg (700px)

   ═══════════════════════════════════════════════════════════════════════════
   AUTOMATIC INLINE STYLE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════

   The following inline styles are AUTOMATICALLY converted to dark theme:
   - background-color: #D3FFBA, #E1FFD0 → success bg
   - background-color: #EEEDED, #f5f5f5 → elevated/secondary bg
   - background-color: rgb(239, 239, 239) → elevated bg
   - background-color: white, #fff → elevated bg
   - color: red/green/yellow/orange/grey on <i> elements → theme colors
   - color: black → primary text

   This means OLD code will still look good without changes!
   But for NEW code, please use the semantic classes above.

   ═══════════════════════════════════════════════════════════════════════════ */