/* Tier 0 — design tokens (docs/PATTERNS.md §2 rule 2: tokens as code, CSS custom
   properties only, no new hues, WCAG AA pairs). The token block is the dashboard's
   single source of truth, reused VERBATIM (no new hues, no raw colors outside
   :root). The public site is dark-on-dark like the console: one brand. */
:root {
  --bg-base: #0f1419;
  --bg-surface: #161d24;
  --bg-raised: #1e2832;
  --border-grid: #25303b;
  --border-strong: #35414f;
  --text-primary: #eef3f7;
  --text-muted: #a8b4c0;
  --text-faint: #85919e;
  --accent: #e8a93c;
  --accent-strong: #ffc866;
  --accent-ink: #221600;
  --danger: #ff6b81;
  --safe: #3ecf8e;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
  --r-full: 9999px;

  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;

  --dur-fast: 150ms; --dur-base: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); z-index: 10;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* header / nav */
.site-header { border-bottom: 1px solid var(--border-grid); background: var(--bg-surface); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); padding-bottom: var(--sp-4);
}
.brand { color: var(--text-primary); text-decoration: none; font-weight: 700; letter-spacing: 0.04em; }
.brand__tagline { display: block; color: var(--text-faint); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.site-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] { color: var(--accent-strong); }
.locale-switch {
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
}

#main { padding-top: var(--sp-7); padding-bottom: var(--sp-6); }

/* hero */
.hero { max-width: 46rem; margin-bottom: var(--sp-7); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); margin: 0 0 var(--sp-2); }
.hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin: 0 0 var(--sp-4); }
.lede { color: var(--text-muted); font-size: var(--fs-lg); margin: 0 0 var(--sp-5); }
.cta {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 700; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
}
.cta:hover { background: var(--accent-strong); }

/* manifest sections */
.manifest-section { margin: 0 0 var(--sp-6); max-width: 52rem; }
.manifest-section h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.manifest-section ul { margin: 0; padding-left: 1.2em; color: var(--text-muted); }
.manifest-section li { margin-bottom: var(--sp-2); }
.manifest-section--excludes { border-left: 3px solid var(--danger); padding-left: var(--sp-4); }
.excludes { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.excludes li {
  background: var(--bg-raised); border: 1px solid var(--border-grid);
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm);
}

.links { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-7); }

/* access form */
.access { background: var(--bg-surface); border: 1px solid var(--border-grid); border-radius: var(--r-lg); padding: var(--sp-6); max-width: 32rem; }
.access h2 { margin: 0 0 var(--sp-2); }
.access-form { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.access-form label { font-size: var(--fs-sm); color: var(--text-muted); }
.access-form input {
  background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--text-primary); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); font-family: inherit;
}
.access-form button {
  justify-self: start; margin-top: var(--sp-2); background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r-full); font-weight: 700; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-md); cursor: pointer;
}
.access-form button:hover { background: var(--accent-strong); }
.access-form__result { color: var(--safe); min-height: 1.6em; margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.access__note { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--sp-4); }

/* prose (sources + privacy) */
.prose { max-width: 56rem; }
.prose h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.prose section { margin: var(--sp-6) 0; }
.prose h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.prose ul { color: var(--text-muted); padding-left: 1.2em; }
.prose li { margin-bottom: var(--sp-2); }
.note { color: var(--text-faint); font-size: var(--fs-sm); }

/* register table */
.register-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.register-table th, .register-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-grid); vertical-align: top; }
.register-table th { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); }
.register-table td { color: var(--text-muted); }
.status { display: inline-block; border-radius: var(--r-full); padding: 2px var(--sp-2); font-size: var(--fs-xs); border: 1px solid var(--border-strong); white-space: nowrap; }
.status--in-use { color: var(--safe); border-color: var(--safe); }
.status--implemented { color: var(--accent-strong); border-color: var(--accent); }
.status--candidate { color: var(--text-primary); }
.status--dropped { color: var(--danger); border-color: var(--danger); }

/* footer */
.site-footer { border-top: 1px solid var(--border-grid); background: var(--bg-surface); margin-top: var(--sp-7); }
.site-footer__inner { padding-top: var(--sp-5); padding-bottom: var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-2) 0; }
.site-footer__note { color: var(--text-faint); font-size: var(--fs-xs); }

.notfound { max-width: 40rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}