/* ============================================================
   Токени ParkBot. ДЖЕРЕЛО ПРАВДИ: design/parkbot-design-system.html
   (розділ :root). Міняти там → переносити сюди руками, 1:1.
   ============================================================ */
:root {
  /* --- Бренд / основні --- */
  --primary:        #2456E5;
  --primary-hover:  #1B45C4;
  --primary-active: #163AA6;
  --primary-tint:   #EAF0FE;
  --primary-fg:     #FFFFFF;

  --accent:         #14B8B1;
  --accent-hover:   #0E9E98;
  --accent-tint:    #E4F8F7;

  /* --- Семантика статусів клієнта --- */
  --success:        #16A34A;
  --success-tint:   #E9F7EF;
  --warning:        #D97706;
  --warning-tint:   #FDF3E7;
  --danger:         #DC2626;
  --danger-tint:    #FDECEC;
  --pending:        #64748B;
  --pending-tint:   #F1F5F9;
  --info:           #0EA5E9;
  --info-tint:      #E6F6FE;

  /* --- Нейтральна шкала (slate) --- */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  /* --- Поверхні --- */
  --bg:        #F6F8FC;
  --surface:   #FFFFFF;
  --surface-2: #F1F5F9;
  --border:    #E2E8F0;

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

  /* --- Радіуси --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Spacing (крок 4px) --- */
  --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; --s-16: 64px;

  /* --- Тіні --- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);
  --shadow-primary: 0 8px 24px rgba(36,86,229,.28);
}

/* Брейкпоінти (довідково): sm 480 · md 768 · lg 1024 · xl 1280 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }