/* ==========================================================================
   Дизайн-токени. Усі кольори / розміри / тіні / анімації — тільки звідси (RULES.md, П11)
   ========================================================================== */

:root {
  /* --- Поверхні --- */
  --c-bg: #eef0f4;
  --c-surface: #ffffff;
  --c-surface-2: #f6f7f9;
  --c-media: #f4f5f7;
  --c-hover: #f1f3f6;
  --c-active: #e7eaef;
  /* Hover білих кнопок, що стоять на сірому фоні сторінки: темніший за фон, нейтральний */
  --c-hover-on-bg: #d5dbe5;
  --c-line: #edf0f4; /* лише тонкі роздільники всередині блоків, не рамки */
  --c-overlay: rgba(14, 19, 30, 0.46);

  /* --- Текст --- */
  --c-text: #131926;
  --c-text-2: #4a5265;
  --c-text-3: #8a92a4;
  --c-text-inv: #ffffff;

  /* --- Бренд --- */
  --c-primary: #151c2b; /* темно-синій: шапка-смуга, футер, другорядні акцентні кнопки */
  --c-primary-hover: #222b3d;
  --c-primary-soft: #e9ecf3;
  --c-accent: #f26b1d; /* помаранчевий: CTA, активні стани */
  --c-accent-hover: #e05b0e;
  --c-accent-press: #c94f09;
  --c-accent-soft: #fff0e5;
  --c-accent-text: #c4500b;

  /* --- Статуси --- */
  --c-success: #12a150;
  --c-success-soft: #e3f6eb;
  --c-warning: #d98200;
  --c-warning-soft: #fff3dc;
  --c-danger: #e4392e;
  --c-danger-soft: #fdeceb;
  --c-info: #2f6bed;
  --c-info-soft: #e8f0fe;

  /* --- Кольори категорій (іконки в навігації) --- */
  --cat-red: #e4392e;
  --cat-red-soft: #fdeceb;
  --cat-amber: #e88a00;
  --cat-amber-soft: #fff3dc;
  --cat-cyan: #0b9fb3;
  --cat-cyan-soft: #e0f6f9;
  --cat-blue: #2f6bed;
  --cat-blue-soft: #e8f0fe;
  --cat-violet: #7a4ae6;
  --cat-violet-soft: #f0eafd;

  /* --- Футер (темний) --- */
  --c-footer: #121826;
  --c-footer-2: #1a2232;
  --c-footer-text: rgba(255, 255, 255, 0.66);
  --c-footer-line: rgba(255, 255, 255, 0.08);

  --c-focus: rgba(242, 107, 29, 0.3);

  /* --- Типографіка --- */
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --lh-tight: 1.25;
  --lh: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Сітка відступів, крок 4px (П4) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* --- Скруглення --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;
  /* Одне скруглення для всіх елементів керування: кнопки, чипи, поля, пошук, пагінація */
  --r-control: var(--r-md);
  /* Лічильники й бейджі — та сама форма, пропорційно менший радіус (інакше 20px-бейдж стає «пігулкою») */
  --r-counter: 6px;

  /* --- М'які тіні замість рамок (П12) --- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px -2px rgba(16, 24, 40, 0.07);
  --sh-md: 0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 8px 20px -6px rgba(16, 24, 40, 0.12);
  --sh-lg: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 18px 40px -12px rgba(16, 24, 40, 0.2);
  --sh-xl: 0 8px 16px -4px rgba(16, 24, 40, 0.08), 0 32px 72px -16px rgba(16, 24, 40, 0.32);
  --sh-accent: 0 6px 16px -6px rgba(242, 107, 29, 0.6);
  --sh-inset: inset 0 0 0 1px rgba(16, 24, 40, 0.06);

  /* --- Розміри елементів --- */
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 20px;
  --control-h-sm: 32px;
  --control-h: 38px;
  --control-h-lg: 46px;
  --input-h: 42px;

  /* --- Макет (П5, П6) --- */
  --topbar-h: 38px;
  --header-h: 72px;
  --container: 1680px;
  --gutter: 32px;
  --col-left: 276px;
  --col-right: 300px;
  --layout-gap: 24px;
  /* Один крок ритму секцій (П4): між секціями І від заголовка секції до її контенту — однаково,
     тож над заголовком і під ним відстань завжди та сама (= gap сторінки --s-5) */
  --section-gap: 20px;

  /* --- Рух (П13) --- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 380ms;

  /* --- Шари --- */
  --z-header: 50;
  --z-panel: 90;
  --z-dropdown: 95;
  --z-modal: 100;
  --z-toast: 120;
}

@media (max-width: 1439px) {
  :root {
    --gutter: 24px;
    --col-left: 256px;
    --col-right: 280px;
    --layout-gap: 20px;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-h: 64px;
  }
}

/* Телефон: компактніший масштаб усього інтерфейсу (шрифти, контроли, скруглення) */
@media (max-width: 767px) {
  :root {
    --gutter: 12px;
    --header-h: 56px;
    --layout-gap: 12px;
    --section-gap: 16px; /* = gap сторінки на телефоні (--s-4) */

    --fs-12: 11px;
    --fs-13: 12px;
    --fs-14: 13px;
    --fs-15: 14px;
    --fs-16: 15px;
    --fs-18: 16px;
    --fs-20: 17px;
    --fs-22: 18px;
    --fs-26: 20px;

    --control-h-sm: 28px;
    --control-h: 34px;
    --control-h-lg: 40px;
    --input-h: 40px;

    --r-lg: 10px;
    --r-xl: 12px;
    --r-2xl: 16px;

    --icon-lg: 18px;
  }
}