@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

/* Design tokens shared by every screen: booking page, admin, master cabinet.
   --brand is the tenant's colour (set at runtime from settings); everything
   else stays neutral so the product sits well inside any company's site. */
:root {
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #F6F6F7;
  --surface: #FFFFFF;
  --surface-2: #F3F3F5;
  --surface-3: #EBEBEE;
  --line: #E7E7EB;
  --line-strong: #D5D5DB;
  --ink: #121216;
  --ink-2: #4B4B57;
  --ink-3: #868692;

  --brand: #121216;
  --brand-ink: #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 7%, #FFFFFF);
  --brand-hover: color-mix(in srgb, var(--brand) 86%, #000000);
  --ring: color-mix(in srgb, var(--brand) 30%, transparent);

  --positive: #1E8449;
  --positive-soft: #E7F4EC;
  --warning: #B4540A;
  --warning-soft: #FCF1E4;
  --danger: #C0392F;
  --danger-soft: #FBEAE8;

  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --shadow-pop: 0 12px 32px rgba(18, 18, 22, .12), 0 2px 6px rgba(18, 18, 22, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Line icons: one stroke weight everywhere. */
svg.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Spinner used by buttons in the loading state. */
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--brand-ink) var(--brand-ink) transparent transparent;
  animation: spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}