/**
 * Тема в духе Attio (нейтральные серые, Inter, мягкие радиусы и тени).
 * Подключение в шаблоне:
 *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/attio-theme.css') }}">
 *   (если шаблон рендерится из blueprint auto_gen_web — подставьте url_for('auto_gen_web.static', filename='css/attio-theme.css'))
 *   (или свой путь к статике)
 *
 * Разметка карточки: см. static/attio-card-example.html
 */

:root {
  /* Шрифты */
  --aui-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --aui-font-display: "Inter", var(--aui-font-sans);

  /* Радиусы — ближе к референсу Attio (карточки 12–16px) */
  --aui-radius-xs: 4px;
  --aui-radius-sm: 6px;
  --aui-radius-md: 8px;
  --aui-radius-lg: 12px;
  --aui-radius-xl: 16px;

  /* Палитра: нейтрали slate, акценты как на референсных скринах */
  --aui-color-text: #1e293b;
  --aui-color-text-secondary: #64748b;
  --aui-color-text-muted: #94a3b8;
  --aui-color-text-placeholder: #cbd5e1;

  --aui-color-bg-page: #f8fafc;
  --aui-color-bg-surface: #ffffff;
  --aui-color-bg-muted: #f1f5f9;
  --aui-color-bg-subtle: #f1f5f9;

  /* Обводки: тонкая линия 1px, slate-200/300 */
  --aui-border-width: 1px;
  --aui-color-border: #e2e8f0;
  --aui-color-border-strong: #cbd5e1;

  /* Основной синий и ховер (как «мягкий» primary на скринах) */
  --aui-color-accent-blue: #3b82f6;
  --aui-color-accent-blue-hover: #2563eb;

  /* Доп. акценты для графиков/тегов */
  --aui-color-accent-pink: #ff85c0;
  --aui-color-accent-purple: #9276f2;
  --aui-color-accent-yellow: #ffd666;

  /* Тени — мягче, без жёсткой кромки */
  --aui-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px 0 rgb(15 23 42 / 0.08);
  --aui-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --aui-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.06);

  /* Лёгкая точечная сетка на фоне рабочей области */
  --aui-bg-page-dot: #e2e8f0;
  --aui-bg-page-dot-size: 18px;
  --aui-bg-page-pattern: radial-gradient(
    circle at 1px 1px,
    var(--aui-bg-page-dot) 1px,
    transparent 0
  );

  /* Типографика (шкала интерфейса) */
  --aui-text-2xs: 0.6875rem; /* 11px — подписи секций, мелкий UI */
  --aui-text-xs: 0.75rem;
  --aui-text-sm: 0.875rem;
  --aui-text-base: 1rem;
  --aui-text-lg: 1.125rem;
  --aui-text-xl: 1.25rem;
  --aui-text-2xl: 1.5rem;
  --aui-text-kpi: 2.25rem; /* крупные числа в KPI / отчётах */

  --aui-leading-tight: 1.25;
  --aui-leading-snug: 1.375;
  --aui-leading-normal: 1.5;

  --aui-tracking-tight: -0.01em;
  --aui-tracking-tighter: -0.02em;

  --aui-weight-medium: 500;
  --aui-weight-semibold: 600;
  --aui-weight-bold: 700;

  /* Переходы */
  --aui-ease-in-out: cubic-bezier(0.2, 0, 0, 1);
  --aui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --aui-duration: 0.15s;
}

/* Опционально: обёртка секции в стиле Attio */
.aui-body {
  font-family: var(--aui-font-sans);
  font-feature-settings: "ss03" 1;
  color: var(--aui-color-text);
  background-color: var(--aui-color-bg-page);
  background-image: var(--aui-bg-page-pattern);
  background-size: var(--aui-bg-page-dot-size) var(--aui-bg-page-dot-size);
}

/* Карточка */
.aui-card {
  position: relative;
  max-width: 28rem;
  padding: 30px;
  border-radius: var(--aui-radius-lg);
  border: var(--aui-border-width) solid var(--aui-color-border);
  background-color: var(--aui-color-bg-surface);
  box-shadow: var(--aui-shadow-sm);
}

.aui-card__title {
  margin: 0 0 8px;
  font-family: var(--aui-font-display);
  font-size: var(--aui-text-xl);
  font-weight: var(--aui-weight-medium);
  line-height: 1.625rem;
  letter-spacing: var(--aui-tracking-tight);
  color: var(--aui-color-text);
}

.aui-card__subtitle {
  margin: 0 0 22px;
  font-size: var(--aui-text-sm);
  font-weight: var(--aui-weight-medium);
  line-height: var(--aui-leading-snug);
  letter-spacing: -0.005em;
  color: var(--aui-color-text-secondary);
}

.aui-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

/* Кнопка «ghost» в духе Attio */
.aui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 9px 20px;
  font-family: var(--aui-font-sans);
  font-size: var(--aui-text-sm);
  font-weight: var(--aui-weight-medium);
  line-height: 1.25rem;
  letter-spacing: var(--aui-tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--aui-radius-md);
  border: var(--aui-border-width) solid transparent;
  cursor: pointer;
  transition:
    color var(--aui-duration) var(--aui-ease-default),
    background-color var(--aui-duration) var(--aui-ease-default),
    border-color var(--aui-duration) var(--aui-ease-default),
    box-shadow var(--aui-duration) var(--aui-ease-default);
}

.aui-btn--ghost {
  color: var(--aui-color-text-muted);
  background-color: transparent;
  border-color: transparent;
}

.aui-btn--ghost:hover {
  color: var(--aui-color-text-secondary);
  background-color: var(--aui-color-bg-subtle);
}

.aui-btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--aui-color-accent-blue) 30%, transparent);
}

@supports not (color: color-mix(in lab, red, red)) {
  .aui-btn--ghost:focus-visible {
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
  }
}

.aui-btn--ghost:active {
  color: var(--aui-color-text);
  background-color: var(--aui-color-border-strong);
}

.aui-btn--ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Вторичная кнопка с обводкой */
.aui-btn--outline {
  color: var(--aui-color-text);
  background-color: var(--aui-color-bg-surface);
  border: var(--aui-border-width) solid var(--aui-color-border);
  box-shadow: var(--aui-shadow-sm);
}

.aui-btn--outline:hover {
  background-color: var(--aui-color-bg-muted);
  border-color: var(--aui-color-border-strong);
}

.aui-btn--outline:focus-visible {
  outline: none;
  box-shadow: var(--aui-shadow-sm), 0 0 0 3px color-mix(in oklab, var(--aui-color-accent-blue) 30%, transparent);
}

@supports not (color: color-mix(in lab, red, red)) {
  .aui-btn--outline:focus-visible {
    box-shadow: var(--aui-shadow-sm), 0 0 0 3px rgb(59 130 246 / 0.3);
  }
}