/*
 * ТЕеАТР: токены и основа. Общие для публичной афиши, админки и форм.
 * Идея оформления: театральная программка. Бумага, чернила, одно чайное поле цвета, коралловый для дат и «скоро».
 * Правила: углы прямые, поверхности разделяем ступенью тона (без рамок и теней), один акцент, два шрифта.
 */
:root {
  color-scheme: light;

  /* бумага и ступени тона */
  --paper: #f5f7f3;
  --paper-2: #ebf0ea;
  --paper-3: #dde6dc;
  /* чернила */
  --ink: #14231e;
  --ink-2: #485a53;
  /* чайное поле */
  --tea: #174c40;
  --on-tea: #f3f8f4;
  --on-tea-2: #c4dacf;
  /* действие и акцент */
  --action: #174c40;
  --on-action: #ffffff;
  --coral: #cf5238;
  --coral-ink: #ad3f29;
  /* состояния */
  --ok: #19704b;
  --warn: #8a5f00;
  --danger: #b3261e;
  --focus: #174c40;

  /* шрифты */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* пять размеров */
  --step-1: 0.8125rem;
  --step-2: 1rem;
  --step-3: 1.25rem;
  --step-4: 1.75rem;
  --step-5: clamp(1.75rem, 0.9rem + 2.2vw, 2.75rem);

  /* отступы: 4 8 12 16 24 32 48 64 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --control: 44px;

  /* движение: пружина, глайд, вкладки */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tab: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.12s;
  --dur-2: 0.2s;
  --dur-3: 0.4s;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1613;
  --paper-2: #17211d;
  --paper-3: #212e28;
  --ink: #e8f0eb;
  --ink-2: #a4b6ad;
  --tea: #1a493d;
  --on-tea: #eef6f1;
  --on-tea-2: #b5cdc2;
  --action: #63c4aa;
  --on-action: #06140f;
  --coral: #ef846a;
  --coral-ink: #f4a08b;
  --ok: #62c796;
  --warn: #e0b24d;
  --danger: #f08a82;
  --focus: #63c4aa;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-2) / 1.5 var(--font-text);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--action);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--tea); color: var(--on-tea); }

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

.skip-link {
  position: fixed;
  top: -64px;
  left: var(--s-4);
  z-index: 400;
  padding: var(--s-3) var(--s-4);
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-glide);
}
.skip-link:focus { top: var(--s-4); }

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