:root {
  /* ─── Brand кольори ─── */
  --primary:        #003D82;
  --primary-dark:   #002E63;
  --primary-light:  #1A56A8;
  --accent:         #FF6B35;
  --accent-dark:    #E05520;
  --accent-light:   #FF8C5E;
  --cat-accent:     #00BCD4;

  /* ─── Текст ─── */
  --text:           #44546A;
  --text-strong:    #1C2B3A;
  --text-muted:     #6B7B8D;
  --text-light:     #9AACBE;
  --text-on-dark:   #F0F4F8;

  /* ─── Фони ─── */
  --bg:             #FFFFFF;
  --bg-light:       #F4F7FB;
  --bg-section:     #EEF2F7;
  --bg-dark:        #0C1B2E;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F8FAFD;

  /* ─── Межі ─── */
  --border:         #D8E2EE;
  --border-hover:   #B0C4DA;
  --border-focus:   rgba(0, 61, 130, 0.5);

  /* ─── Тіні ─── */
  --shadow-sm:      0 1px 4px rgba(44, 68, 100, 0.08);
  --shadow-md:      0 4px 16px rgba(44, 68, 100, 0.12);
  --shadow-lg:      0 8px 32px rgba(44, 68, 100, 0.16);
  --shadow-accent:  0 4px 24px rgba(255, 107, 53, 0.3);

  /* ─── Типографія ─── */
  --ff-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ─── Відступи ─── */
  --container-max:  1200px;
  --section-py:     80px;
  --section-py-sm:  48px;
  --gap-sm:         16px;
  --gap-md:         24px;
  --gap-lg:         40px;
  --gap-xl:         64px;

  /* ─── Радіус ─── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-full:    9999px;

  /* ─── Переходи ─── */
  --t-fast:         150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:         250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:         400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-index ─── */
  --z-nav:          100;
  --z-modal:        400;
  --z-toast:        500;

  /* ─── Safe area (iOS) ─── */
  --safe-top:       env(safe-area-inset-top, 0px);
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
}