/* Design tokens shared by the public site and the dashboard. */
:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f4f2ed;
  --ink: #17161c;
  --ink-2: #3a3943;
  --muted: #6b6a74;
  --faint: #9a99a3;
  --line: #e6e2da;
  --line-strong: #d4cfc4;
  --accent: #b4441c;
  --accent-ink: #8f3412;
  --accent-soft: #f8e9e1;
  --success: #1f7a4d;
  --success-soft: #e3f3ea;
  --warning: #9a6200;
  --warning-soft: #fbf0d9;
  --danger: #b42323;
  --danger-soft: #fbe6e6;
  --info: #2457a6;
  --info-soft: #e5edf9;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(23 22 28 / 0.06);
  --shadow: 0 1px 2px rgb(23 22 28 / 0.05), 0 6px 20px -6px rgb(23 22 28 / 0.12);
  --shadow-lg: 0 20px 50px -12px rgb(23 22 28 / 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus: 0 0 0 3px rgb(180 68 28 / 0.28);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[x-cloak] { display: none !important; }

.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* !important: a component rule (e.g. `.field input[type="file"] { width: 100% }`) must never un-hide it. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--ink);
  color: #fff; border-radius: var(--radius-sm); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 1rem; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

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

/* HTMX request indicator */
.htmx-indicator { opacity: 0; transition: opacity .2s; pointer-events: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; pointer-events: auto; }
.spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; vertical-align: -0.15em; }
@keyframes spin { to { transform: rotate(360deg); } }