@import "tailwindcss";

/* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
/* Цвета уточняются в Sprint 2 по таблице Oracal                          */
:root {
  /* Фирменные цвета (приблизительно — уточнить в Sprint 2) */
  --brand-053m: #7ecfca;   /* Основной бирюзовый (Oracal 053M) */
  --brand-073m: #5b7b87;   /* Тёмный серо-голубой (Oracal 073M) */
  --brand-066m: #5bb5ad;   /* Средний бирюзовый (Oracal 066M) */
  --brand-050m: #1b4c72;   /* Тёмно-синий, наружная реклама (Oracal 050M) */
  --brand-081m: #c4a882;   /* Бежевый (Oracal 081M) */
  --brand-080m: #5c2e0e;   /* Тёмно-коричневый (Oracal 080M) */
  --brand-white: #ffffff;

  /* UI-цвета брендбука */
  --bb-sidebar-bg: #f8f9fa;
  --bb-sidebar-border: #e5e7eb;
  --bb-sidebar-text: #374151;
  --bb-sidebar-text-muted: #6b7280;
  --bb-sidebar-active-bg: #e0f5f4;
  --bb-sidebar-active-text: var(--brand-053m);
  --bb-sidebar-section: #9ca3af;
  --bb-content-bg: #ffffff;
  --bb-border: #e5e7eb;
  --bb-text: #111827;
  --bb-text-muted: #6b7280;

  /* Шрифты */
  --font-brand: 'DINPro', 'DIN Pro', Arial, sans-serif;
  --font-web: 'Fira Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

@theme inline {
  --color-background: #ffffff;
  --color-foreground: var(--bb-text);
}

body {
  font-family: var(--font-web);
  background: var(--bb-content-bg);
  color: var(--bb-text);
  -webkit-font-smoothing: antialiased;
}

/* ─── Анимации ───────────────────────────────────────────────── */
@keyframes bb-spin {
  to { transform: rotate(360deg); }
}

/* ─── Кнопки (Sprint 3) ──────────────────────────────────────── */
.bb-btn {
  font-family: var(--font-web);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}
.bb-btn:hover:not(:disabled)      { filter: brightness(0.9); }
.bb-btn:active:not(:disabled)     { filter: brightness(0.82); }
.bb-btn:disabled                  { cursor: not-allowed; opacity: 0.5; }
.bb-btn:focus-visible             { outline: 2px solid var(--brand-053m); outline-offset: 2px; }

.bb-btn-sm { font-size: 13px; padding: 5px 12px;   border-radius: 6px;  border: 1.5px solid transparent; }
.bb-btn-md { font-size: 14px; padding: 8px 18px;   border-radius: 8px;  border: 1.5px solid transparent; }
.bb-btn-lg { font-size: 16px; padding: 12px 26px;  border-radius: 10px; border: 1.5px solid transparent; }

.bb-btn-primary   { background: var(--brand-073m); color: #fff;             border-color: var(--brand-073m); }
.bb-btn-secondary { background: transparent;        color: var(--brand-073m); border-color: var(--brand-073m); }
.bb-btn-ghost     { background: transparent;        color: var(--brand-073m); border-color: transparent;       }
.bb-btn-danger    { background: #dc2626;            color: #fff;             border-color: #dc2626;           }

/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
.bb-input,
.bb-textarea,
.bb-select {
  font-family: var(--font-web);
  font-size: 14px;
  color: var(--bb-text);
  background: #fff;
  border: 1.5px solid var(--bb-border);
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  -webkit-font-smoothing: antialiased;
}
.bb-input:focus,
.bb-textarea:focus,
.bb-select:focus {
  border-color: var(--brand-053m);
  box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.2);
}
.bb-input.bb-error,
.bb-textarea.bb-error,
.bb-select.bb-error  { border-color: #dc2626; }
.bb-input.bb-error:focus,
.bb-textarea.bb-error:focus,
.bb-select.bb-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.bb-input:disabled,
.bb-textarea:disabled,
.bb-select:disabled  { opacity: 0.5; cursor: not-allowed; background: var(--bb-sidebar-bg); }

.bb-textarea { resize: vertical; min-height: 100px; }
.bb-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

.bb-checkbox,
.bb-radio {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand-073m);
  flex-shrink: 0;
}

/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
.bb-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  padding: 2px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.bb-toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}