@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
  fieldset { padding: 0; border: 0; min-width: 0; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  img, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--safe-t) + var(--bar-h) + 16px);
  }
  /* Фон не прокручивается под открытым окном */
  html:has(dialog[open]) { overflow: hidden; }

  body {
    min-height: 100vh; min-height: 100dvh;
    font-family: var(--font); font-size: var(--fs-m); line-height: 1.45;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
  }

  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  ::selection { background: var(--brand-soft); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Иконки: обводка наследует цвет текста */
  .ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ico--sm { width: 16px; height: 16px; }
  .ico--md { width: 20px; height: 20px; }
  .ico--lg { width: 24px; height: 24px; }
  .theme-icon-sun { display: none; }
  [data-theme="dark"] .theme-icon-moon { display: none; }
  [data-theme="dark"] .theme-icon-sun { display: block; }

  /* Тона и статусы: компонент читает --c (заливка) и --c-ink (текст) */
  [data-tone="blue"]   { --c: var(--c-blue);   --c-ink: var(--c-blue-ink); }
  [data-tone="green"]  { --c: var(--c-green);  --c-ink: var(--c-green-ink); }
  [data-tone="orange"] { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
  [data-tone="purple"] { --c: var(--c-purple); --c-ink: var(--c-purple-ink); }
  [data-tone="gray"]   { --c: var(--c-gray);   --c-ink: var(--c-gray-ink); }
  [data-tone="danger"] { --c: var(--danger);   --c-ink: var(--danger-ink); }
  [data-status="pending"]   { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
  [data-status="confirmed"] { --c: var(--c-blue);   --c-ink: var(--c-blue-ink); }
  [data-status="completed"] { --c: var(--c-green);  --c-ink: var(--c-green-ink); }
  [data-status="cancelled"] { --c: var(--danger);   --c-ink: var(--danger-ink); }
  [data-status="no_show"]   { --c: var(--c-gray);   --c-ink: var(--c-gray-ink); }

  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
  @keyframes spin { to { rotate: 360deg; } }

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