brand_book/apps/web/app/globals.css

@import "tailwindcss";

/* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
/* Цвета уточняются в Sprint 2 по таблице Oracal                          */
:root {
  /* Фирменные цвета — точные RGB из каталога Oracal */
  --brand-053m: #0089c3;   /* Основной бирюзовый (Oracal 053M) · rgb(0,137,195) */
  --brand-073m: #53514e;   /* Тёмный серо-голубой (Oracal 073M) · rgb(83,81,78) */
  --brand-066m: #00818c;   /* Средний бирюзовый (Oracal 066M) · rgb(0,129,140) */
  --brand-050m: #1b2e5d;   /* Тёмно-синий, наружная реклама (Oracal 050M) · rgb(27,46,93) */
  --brand-081m: #a8885c;   /* Бежевый (Oracal 081M) · rgb(168,136,92) */
  --brand-080m: #432f1e;   /* Тёмно-коричневый (Oracal 080M) · rgb(67,47,30) */
  --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: #dff0fa;
  --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; }

/* Размеры — только padding и font-size, radius задаётся вариантом */
.bb-btn-sm { font-size: 13px; padding: 4px 11px;  border: 1px solid transparent; }
.bb-btn-md { font-size: 14px; padding: 8px 16px;  border: 1px solid transparent; }
.bb-btn-lg { font-size: 18px; padding: 10px 24px; border: 1px solid transparent; font-weight: bold; }

/* Варианты — цвета и радиус по реальному сайту oclinica.ru */

/* primary — коралловая форм-кнопка «Запишите меня!» — #FFA39C */
.bb-btn-primary {
  background: #FFA39C;
  color: #fff;
  border-color: #FF847B;
  border-radius: 7px;
  font-weight: bold;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
}

/* outline — белая с бежевой рамкой «Записаться на прием» */
.bb-btn-outline {
  background: #fff;
  color: #BF9975;
  border-color: #BF9975;
  border-radius: 7px;
}

/* teal — бирюзовая «Позвонить» */
.bb-btn-teal {
  background: #60959c;
  color: #fff;
  border-color: transparent;
  border-radius: 7px;
}

/* pill — кремовая таблетка «Заказать звонок» */
.bb-btn-pill {
  background: #e9e4d4;
  color: #333;
  border-color: #d5cfbd;
  border-radius: 25px;
}

/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
.bb-input,
.bb-textarea,
.bb-select {
  font-family: var(--font-web);
  font-size: 14px;
  color: var(--bb-text);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  -webkit-font-smoothing: antialiased;
}
.bb-input { height: 50px; }
.bb-input:focus,
.bb-textarea:focus,
.bb-select:focus {
  border-color: var(--brand-053m);
  box-shadow: 0 0 0 3px rgba(0, 137, 195, 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;
  height: 50px;
  padding: 10px 36px 10px 10px;
  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;
}

.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;
}