/*
 * nofrontdesk.com — the public site. Tokens follow apps/web/DESIGN.md
 * ("the calm front desk": spruce, brass, cool stone; no gradients). System
 * fonts only: the site makes no third-party requests at all.
 * WCAG AA: every text pair below is >= 4.5:1, UI boundaries >= 3:1.
 */
:root {
  color-scheme: light dark;
  --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --gutter: 1rem;
  --content-max: 44rem;
  --radius-md: 10px;
  --radius-lg: 14px;

  --color-bg: #f3f5f3;
  --color-surface: #ffffff;
  --color-surface-sunken: #e9eeeb;
  --color-border: #d3dbd7;
  --color-border-strong: #8d9b95;
  --color-text: #15201d;
  --color-text-muted: #4a5853;
  --color-primary: #1c5a4c;
  --color-primary-hover: #154539;
  --color-primary-soft: #e2efe9;
  --color-on-primary: #ffffff;
  --color-accent: #8f6312;
  --color-focus: #2f6fd6;
  --color-warning-soft: #fdf3dc;
  --color-warning-border: #b98a2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0e1513;
    --color-surface: #151f1c;
    --color-surface-sunken: #0b110f;
    --color-border: #2a3833;
    --color-border-strong: #62746c;
    --color-text: #e6eeea;
    --color-text-muted: #aebcb6;
    --color-primary: #6cc4a8;
    --color-primary-hover: #8dd4bd;
    --color-primary-soft: #16302a;
    --color-on-primary: #0b1a15;
    --color-accent: #e2b960;
    --color-focus: #8ab4ff;
    --color-warning-soft: #2b2312;
    --color-warning-border: #a7802f;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0e1513;
  --color-surface: #151f1c;
  --color-surface-sunken: #0b110f;
  --color-border: #2a3833;
  --color-border-strong: #62746c;
  --color-text: #e6eeea;
  --color-text-muted: #aebcb6;
  --color-primary: #6cc4a8;
  --color-primary-hover: #8dd4bd;
  --color-primary-soft: #16302a;
  --color-on-primary: #0b1a15;
  --color-accent: #e2b960;
  --color-focus: #8ab4ff;
  --color-warning-soft: #2b2312;
  --color-warning-border: #a7802f;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.55;
  overflow-wrap: break-word;
}

a { color: var(--color-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  z-index: 10;
}
.skip:focus { top: 0.5rem; }

.wrap {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- header / footer ---- */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.logo svg { width: 2.25rem; height: auto; flex: none; }
.logo svg .tag { fill: var(--color-primary); }
.logo svg .hole { fill: var(--color-surface); }
.logo svg .ring { fill: none; stroke: #b7862f; stroke-width: 3; stroke-linecap: round; }
.logo .no { color: var(--color-primary); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
}
.site-nav a:hover { color: var(--color-text); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; }

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--color-border);
  padding: 2rem 0 3rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.site-footer a { color: var(--color-text-muted); display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { margin: 0; }

/* ---- content ---- */
main { display: block; padding-top: 2.5rem; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.75rem; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); margin-top: 2.5rem; }
h3 { font-size: var(--text-xl); margin-top: 1.75rem; }
p, ul, ol { margin: 0 0 1rem; }
li + li { margin-top: 0.35rem; }
.site-nav li + li, .site-footer li + li, .cards li + li { margin-top: 0; }
.lede { font-size: var(--text-xl); color: var(--color-text-muted); line-height: 1.45; max-width: 38rem; }
.kicker {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.muted { color: var(--color-text-muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--color-primary);
}
.button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.button.secondary { background: transparent; color: var(--color-primary); }
.button.secondary:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 0;
}
.card h3 { margin-top: 0; font-size: var(--text-lg); }
.card p { margin: 0; color: var(--color-text-muted); }

.panel {
  background: var(--color-primary-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.panel h2 { margin-top: 0; }

.note {
  background: var(--color-warning-soft);
  border-left: 4px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
}

.legal h2 { font-size: var(--text-xl); }
.legal h3 { font-size: var(--text-lg); }
.updated { color: var(--color-text-muted); font-size: var(--text-sm); }

ol.steps { padding-left: 1.4rem; }
ol.steps li { padding-left: 0.25rem; }
code, kbd { font-family: var(--font-mono); font-size: 0.95em; background: var(--color-surface-sunken); padding: 0.05em 0.35em; border-radius: 4px; }

dl.faq dt { font-weight: 700; margin-top: 1.25rem; }
dl.faq dd { margin: 0.25rem 0 0; color: var(--color-text-muted); }

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