/* Local variable fonts keep typography consistent without third-party requests. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2?v=20260919") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable-Italic.woff2?v=20260919") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* One LuHoCh palette shared by marketing, setup, workspace and account pages. */
:root {
  --brand-ink: #1c2f40;
  --brand-muted: #56646d;
  --brand-accent: #a84f3b;
  --brand-accent-hover: #883b2c;
  --brand-accent-rgb: 168, 79, 59;
  --brand-ink-rgb: 28, 47, 64;
  --brand-paper: #faf8f3;
  --brand-surface: #ffffff;
  --brand-soft: #eeece5;
  --brand-mint: #e5e1d8;
  --brand-line: #dcdcd4;
  --brand-line-strong: #8c989f;
  --brand-rail: #203447;
  --brand-rail-text: #d4dee6;
  --brand-rail-heading: #c2d0dd;
  --brand-rail-active: #3b4e5e;
  --brand-rail-line: #566b7c;
  --brand-rail-scroll: #8d9ead;
  --brand-rail-focus: #f4b4a0;
  --brand-danger: #b42318;
  --brand-success: #08785f;
  --brand-success-rgb: 8, 120, 95;
  --brand-success-soft: #e8f4ee;
  --brand-radius: 24px;
  --brand-shadow: 0 12px 36px rgba(var(--brand-ink-rgb), .055);
  --brand-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-caption: .75rem;
  --type-small: .875rem;
  --type-body: 1rem;
  font-family: var(--brand-font);
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: var(--brand-ink);
  background: var(--brand-paper);
}

body { font-size: var(--type-body); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
main, section, article, form { min-width: 0; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--brand-accent-hover); outline-offset: 4px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  color: var(--brand-ink);
  font-size: 21px;
  letter-spacing: -.045em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--brand-accent); }
.brand-mark {
  position: relative;
  display: inline-block;
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  background: var(--brand-ink);
}
.brand-mark span {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid #6ed3bd;
  border-radius: 50%;
  left: 7px;
  top: 6px;
}
.brand-mark span + span {
  border-color: #78aaff;
  left: 15px;
  top: 15px;
}

/* Authentication uses the same calm surfaces as the public site. */
.brand-panel .brand-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.setup-site-links { display: flex; flex-wrap: wrap; gap: 16px; }
.setup-site-links a {
  color: var(--brand-muted);
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
}
.setup-site-links a:hover { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 4px; }

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