/* schedule-tokens.css — shared look for the public booking pages and the
   host admin. Both stylesheets read these; change a color here, not there.
   Green is WikiMapping's #2d5016. Dark mode follows the visitor's system
   setting. */

:root {
  --s-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s-bg: #f6f7f4;
  --s-surface: #ffffff;
  --s-surface-2: #f0f3ec;
  --s-ink: #1f2a1a;
  --s-ink-2: #4f5a47;
  --s-ink-3: #7a8273;
  --s-line: #dfe4d8;
  --s-brand: #2d5016;
  --s-brand-ink: #ffffff;
  --s-brand-soft: #e6efdc;
  --s-brand-hover: #24410f;
  --s-free: #cfe5bd;
  --s-free-strong: #8fbf6a;
  --s-busy: #e3e1dc;
  --s-warn: #b54708;
  --s-warn-soft: #fdf1e7;
  --s-danger: #b42318;
  --s-danger-soft: #fdeceb;
  --s-focus: #3b82f6;
  --s-radius: 12px;
  --s-radius-sm: 8px;
  --s-shadow: 0 1px 2px rgba(31, 42, 26, .06), 0 4px 16px rgba(31, 42, 26, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --s-bg: #141812;
    --s-surface: #1c2219;
    --s-surface-2: #232b1f;
    --s-ink: #eef2ea;
    --s-ink-2: #c3ccbb;
    --s-ink-3: #8e9886;
    --s-line: #323b2c;
    --s-brand: #8fc46a;
    --s-brand-ink: #10180b;
    --s-brand-soft: #2a3a1f;
    --s-brand-hover: #a5d683;
    --s-free: #34502a;
    --s-free-strong: #5c8a41;
    --s-busy: #2b2f28;
    --s-warn: #f5a35c;
    --s-warn-soft: #3a2a1b;
    --s-danger: #f97066;
    --s-danger-soft: #3b1f1d;
    --s-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Visible keyboard focus everywhere on these pages. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--s-focus);
  outline-offset: 2px;
}

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

/* Headings receive focus by script when a step changes (so screen readers
   announce it); that focus should not draw a ring. */
:where(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

/* `hidden` must win over any component's display rule (a `display: grid`
   on .s-cancel-box once showed the cancel confirmation before it was asked
   for). */
[hidden] { display: none !important; }