/* ═══════════════════════════════════════════════════════════════
   H4Mail — Design tokens
   Стиль: Stripe / GitHub. Чёрно-белый акцент.
   Mobile-first, fluid typography.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');

:root {
  /* ─── Шрифт ─── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* ─── Флюидная типографика (mobile → desktop) ─── */
  --text-xs:   clamp(10px, 1.4vw, 11px);
  --text-sm:   clamp(11px, 1.6vw, 12px);
  --text-base: clamp(13px, 1.9vw, 14px);
  --text-md:   clamp(14px, 2vw,   15px);
  --text-lg:   clamp(15px, 2.4vw, 17px);
  --text-xl:   clamp(17px, 2.8vw, 20px);
  --text-2xl:  clamp(19px, 3.2vw, 24px);
  --text-3xl:  clamp(22px, 3.8vw, 28px);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* ─── Радиусы ─── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ─── Флюидные отступы ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: clamp(10px, 2vw,   12px);
  --space-4: clamp(12px, 2.6vw, 16px);
  --space-5: clamp(14px, 3vw,   20px);
  --space-6: clamp(16px, 3.6vw, 24px);
  --space-8: clamp(20px, 4.5vw, 32px);
  --space-10: clamp(24px, 5.5vw, 40px);

  /* ─── Скорости ─── */
  --t-fast:  120ms;
  --t-base:  180ms;
  --t-slow:  260ms;
  --ease:    cubic-bezier(.4, 0, .2, 1);

  /* ─── Z-index ─── */
  --z-modal:    1000;
  --z-toast:    1100;
  --z-dropdown: 900;

  /* ─── Мобильные токены ─── */
  --touch-target: 44px;            /* минимальный размер кликабельного */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ═══════════════ ТЁМНАЯ ТЕМА ═══════════════ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:    #0a0a0b;
  --bg-base:    #0f0f11;
  --bg-raised:  #15151a;
  --bg-overlay: #1a1a20;
  --bg-input:   #121215;

  --border-subtle: #1f1f24;
  --border-base:   #2a2a32;
  --border-strong: #3a3a44;

  --text-primary:   #e8e8ec;
  --text-secondary: #a0a0ac;
  --text-muted:     #6b6b78;
  --text-faint:     #4a4a55;
  --text-inverse:   #0a0a0b;

  --accent:        #ffffff;
  --accent-hover:  #ececef;
  --accent-active: #d5d5da;
  --accent-text:   #0a0a0b;

  --success:    #7ddba8;  --success-bg: #16211a;
  --warning:    #e5c07b;  --warning-bg: #221d12;
  --danger:     #e5646b;  --danger-bg:  #221518;
  --info:       #8ab4f8;

  --shadow-sm: 0 1px 2px  rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.65);

  --focus-ring: 0 0 0 3px rgba(255,255,255,.12);

  --scroll-track: #121215;
  --scroll-thumb: #2a2a32;
}

/* ═══════════════ СВЕТЛАЯ ТЕМА ═══════════════ */
[data-theme="light"] {
  color-scheme: light;

  --bg-page:    #f5f5f7;
  --bg-base:    #ffffff;
  --bg-raised:  #ffffff;
  --bg-overlay: #f0f0f3;
  --bg-input:   #fafafb;

  --border-subtle: #ececf0;
  --border-base:   #dcdce1;
  --border-strong: #b8b8c0;

  --text-primary:   #0a0a0b;
  --text-secondary: #55555f;
  --text-muted:     #80808b;
  --text-faint:     #b0b0b8;
  --text-inverse:   #ffffff;

  --accent:        #0a0a0b;
  --accent-hover:  #1c1c22;
  --accent-active: #2e2e36;
  --accent-text:   #ffffff;

  --success:    #1a7f4a;  --success-bg: #e7f6ee;
  --warning:    #8a6210;  --warning-bg: #fbf3df;
  --danger:     #b81d24;  --danger-bg:  #fbeaeb;
  --info:       #1a4fba;

  --shadow-sm: 0 1px 2px  rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.18);

  --focus-ring: 0 0 0 3px rgba(10,10,11,.15);

  --scroll-track: #ececf0;
  --scroll-thumb: #b8b8c0;
}

/* ═══════════════ БАЗА ═══════════════ */
html, body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-base) var(--ease),
              color      var(--t-base) var(--ease);
  overflow-x: hidden;
}

* { box-sizing: border-box; }

/* Отключаем зум по double-tap на iOS для кнопок */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* Скроллбар — только на десктопе, чтобы не загромождать мобильный */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--scroll-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 6px;
    border: 2px solid var(--scroll-track);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
}

/* Selection */
::selection { background: var(--accent); color: var(--accent-text); }

/* Smooth scroll на iOS */
.tabs, .quick-grid, .service-list, .modal-box, table {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ═══════════════ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border-base);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: all var(--t-fast) var(--ease);
}
.theme-toggle:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Мобильная версия — крупнее для тача */
@media (max-width: 640px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}

/* ═══════════════ АДАПТИВНЫЕ ХЕЛПЕРЫ ═══════════════ */
.hide-mobile { display: initial; }
.hide-desktop { display: none; }

@media (max-width: 767px) {
  .hide-mobile  { display: none !important; }
  .hide-desktop { display: initial !important; }
}

/* Touch-friendly: всё кликабельное минимум 44px на тач-устройствах */
@media (hover: none) and (pointer: coarse) {
  button,
  a.quick-card,
  .tabs button,
  [role="button"] {
    min-height: var(--touch-target);
  }
  /* Убираем hover-эффекты, они не работают на тач-е и создают "залипание" */
  *:hover { transition: none; }
}

/* Safe area для iPhone X+ */
body {
  padding-left:  var(--safe-left);
  padding-right: var(--safe-right);
}

/* Отступ снизу для футеров / фиксированных элементов */
.safe-bottom {
  padding-bottom: calc(var(--space-4) + var(--safe-bottom));
}

/* ═══════════════ МОБИЛЬНЫЕ МЕДИАЗАПРОСЫ ═══════════════ */
@media (max-width: 640px) {
  /* Контейнер страницы — меньше паддинга */
  .app, .container, .wrap {
    padding-left:  var(--space-3);
    padding-right: var(--space-3);
  }

  /* Модалки — на всю ширину */
  .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    margin-top: auto;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Карточки — компактнее */
  .service {
    padding: var(--space-3) !important;
    gap: var(--space-3) !important;
  }

  /* Таблицы — горизонтальный скролл */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Кнопки в шапке — компактнее */
  .header button {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }
}