/* ============================================================
   TOKENS — єдине джерело правди (Rule R10)
   Усі кольори / відступи / радіуси / тіні / шрифти беремо ЗВІДСИ.
   ============================================================ */
:root {
  /* ---------- Neutral / сірий масштаб ---------- */
  --neutral-0:  #FFFFFF;
  --neutral-50: #F7F8FA;
  --neutral-100:#F2F4F7;
  --neutral-150:#ECEFF3;
  --neutral-200:#E1E4EA;
  --neutral-300:#CDD0D5;
  --neutral-400:#A4A7AE;
  --neutral-500:#868C98;
  --neutral-600:#525866;
  --neutral-700:#373B42;
  --neutral-800:#21242B;
  --neutral-900:#0E121B;

  /* ---------- Семантика поверхонь / тексту ---------- */
  --bg-page:        #F5F6F8;
  --bg-surface:     var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-hover:       var(--neutral-100);
  --bg-active:      var(--neutral-150);
  --bg-inverse:     var(--neutral-900);

  --stroke-soft:    var(--neutral-150);
  --stroke:         var(--neutral-200);
  --stroke-strong:  var(--neutral-300);

  --text-strong:    var(--neutral-900);
  --text-main:      var(--neutral-800);
  --text-sub:       var(--neutral-600);
  --text-soft:      var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-on-inverse:#FFFFFF;

  /* ---------- Бренд / акцент (помаранчевий) ---------- */
  --primary-50:  #FFF1EB;
  --primary-100: #FFE0D2;
  --primary-200: #FFC1A3;
  --primary-400: #FF8454;
  --primary-500: #FF5C28;   /* base */
  --primary-600: #ED4A14;
  --primary-700: #C23A0E;
  --primary:        var(--primary-500);
  --primary-hover:  var(--primary-600);
  --primary-tint:   var(--primary-50);
  --primary-contrast:#FFFFFF;

  /* ---------- Статусні кольори (base / tint / text) ---------- */
  --success-base:#1FC16B; --success-tint:#E4F8ED; --success-text:#176C43;
  --error-base:  #FB3748; --error-tint:  #FFE9EB; --error-text:  #B42318;
  --error-deep:  #E11D48;  /* малиновий — бордер/іконка/підказка помилки */
  --warning-base:#F6B51E; --warning-tint:#FEF3E0; --warning-text:#8F5E0A;
  --info-base:   #375DFB; --info-tint:   #EBF0FF; --info-text:   #2B45C2;
  --purple-base: #7D52F4; --purple-tint: #F0EBFF; --purple-text: #5B30D6;

  /* ---------- Spacing (4-grid, Rule R4) ---------- */
  --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;

  /* Ритм між блоками */
  --gap-tight:   var(--space-2);   /* 8  */
  --gap-block:   var(--space-4);   /* 16 */
  --gap-section: var(--space-6);   /* 24 */
  --gap-page:    var(--space-6);   /* 24 (desktop може 32) */

  /* ---------- Радіуси ---------- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:12px;
  --radius-2xl:16px; --radius-pill:999px; --radius-circle:50%;

  /* ---------- Тіні ---------- */
  --shadow-xs: 0 1px 2px rgba(14,18,27,.04);
  --shadow-sm: 0 2px 4px rgba(14,18,27,.05);
  --shadow-md: 0 8px 20px rgba(14,18,27,.10), 0 2px 6px rgba(14,18,27,.06);
  --shadow-lg: 0 20px 48px rgba(14,18,27,.18), 0 4px 12px rgba(14,18,27,.08);
  --ring-focus: 0 0 0 3px rgba(255,92,40,.25);
  --ring-neutral: 0 0 0 3px rgba(134,140,152,.18);

  /* ---------- Типографіка ---------- */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Apple Color Emoji", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
  --text-lg:16px; --text-xl:18px; --text-2xl:20px; --text-3xl:24px; --text-4xl:30px;

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

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---------- Розміри іконок (Rule R2) ---------- */
  --icon-sm:16px; --icon-md:18px; --icon-lg:20px; --icon-xl:24px;

  /* ---------- Розміри каркаса (Rule R5/R6) ---------- */
  --sidebar-w:248px;
  --rightpanel-w:320px;
  --topbar-h:64px;
  --footer-h:52px;
  --app-max-w:none;          /* ПК: інтерфейс на ВСЮ ширину екрана (без обмежувача по центру) */
  --gutter:24px;              /* зовнішні відступи навколо «картки» застосунку */

  /* ---------- Контроли (висоти інпутів/кнопок) ---------- */
  --control-h-sm:32px; --control-h:36px; --control-h-lg:40px;

  /* ---------- Анімація ---------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:260ms;

  --z-dropdown:1000; --z-sticky:900; --z-drawer:1100;
  --z-modal:1200; --z-toast:1300;
}

/* Зменшені gutters на телефоні */
@media (max-width:640px){
  :root{ --gutter:16px; --gap-page:16px; }
}