/* base.css — reset, Public Sans, the type ramp, focus.
 *
 * Shared by backoffice, auth-service and core-api through pkg/webui. One CSS,
 * three servers, zero copies: a second copy of a stylesheet is exactly the
 * duplication the token pipeline exists to prevent, one layer up.
 *
 * Every colour here is a --sn-* token from gen/tokens.css. There are no hex
 * literals in this file, or in any file next to it, on purpose.
 */

/* Public Sans, self-hosted (OFL 1.1 — see ../../THIRD-PARTY-NOTICES.md, and
 * fonts/OFL.txt ships beside the files as the licence requires).
 *
 * Sneat loads this from Google Fonts. We do not, and cannot: the CSP is
 * `default-src 'self'` with no font-src, so a font CDN is blocked outright —
 * and self-hosting therefore needs ZERO CSP change. font-display:swap so a slow
 * disk never blanks the page. */
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  font-family: var(--sn-font-family);
  font-size: var(--sn-type-body-1-size);
  line-height: var(--sn-type-body-1-line);
  font-weight: var(--sn-type-body-1-weight);
  color: var(--sn-on-surface);
  background: var(--sn-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  color: var(--sn-on-surface);
}

h1 { font-size: var(--sn-type-h1-size); line-height: var(--sn-type-h1-line); font-weight: var(--sn-type-h1-weight); }
h2 { font-size: var(--sn-type-h2-size); line-height: var(--sn-type-h2-line); font-weight: var(--sn-type-h2-weight); }
h3 { font-size: var(--sn-type-h3-size); line-height: var(--sn-type-h3-line); font-weight: var(--sn-type-h3-weight); }
h4 { font-size: var(--sn-type-h4-size); line-height: var(--sn-type-h4-line); font-weight: var(--sn-type-h4-weight); }
h5 { font-size: var(--sn-type-h5-size); line-height: var(--sn-type-h5-line); font-weight: var(--sn-type-h5-weight); }
h6 { font-size: var(--sn-type-h6-size); line-height: var(--sn-type-h6-line); font-weight: var(--sn-type-h6-weight); }

p { margin: 0 0 1rem; }

a {
  color: var(--sn-primary-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

small,
.text-muted {
  color: var(--sn-on-surface-variant);
  font-size: var(--sn-type-caption-size);
  line-height: var(--sn-type-caption-line);
}

hr {
  border: 0;
  border-top: 1px solid var(--sn-outline-variant);
  margin: 1rem 0;
}

code, pre {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 0.875em;
}

/* Focus. The ring is never removed — if focus is invisible, keyboard operation
 * is guesswork, and `outline: none` is how that happens. `primary` clears 3:1
 * against every surface (WCAG 1.4.11), which is declared and gated in
 * design/tokens/contrast.pairs.json rather than assumed here. */
:focus-visible {
  outline: 2px solid var(--sn-primary);
  outline-offset: 2px;
  border-radius: var(--sn-shape-corner-small);
}
:focus:not(:focus-visible) { outline: none; }

/* Icons. One <use> against the same-origin sprite: CSP-clean, one request,
 * and currentColor means the glyph inherits whatever token already governs the
 * text beside it, so an icon can never disagree with its own label. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
}
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--sn-surface);
  border-radius: var(--sn-shape-corner-medium);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}