/* base.css — reset, body, focus ring, type scale, icons.
   Lifted from the banking app's base.css (specs/design/reference/css/).
   tokens.css stays verbatim; this app's defaults override it here. */

:root { --brand-seed: #1A56DB; }  /* Calwide CRM blue (tech-design D3) */

/* Text on the brand colour. theme-init.js sets --brand-ink (white or ink,
   from the server's contrast check) for the light theme only: an inline
   --on-brand would also override the dark theme, where the brand is
   lightened and needs dark text. */
:root { --on-brand: var(--brand-ink, #FFFFFF); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-brand: #0A0F1E; } }
:root[data-theme="dark"] { --on-brand: #0A0F1E; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: var(--brand); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
[hidden] { display: none !important; }

.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;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}
.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 30;
  background: var(--brand); color: var(--on-brand); text-decoration: none;
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* Type scale (banking frontend.md §3.5) */
.t-display { font-size:32px; line-height:1.10; font-weight:700; }
.t-h1      { font-size:24px; line-height:1.25; font-weight:700; }
.t-h2      { font-size:20px; line-height:1.30; font-weight:600; }
.t-h3      { font-size:17px; line-height:1.40; font-weight:600; }
.t-body    { font-size:16px; line-height:1.50; font-weight:400; }
.t-body-sm { font-size:15px; line-height:1.45; font-weight:400; }
.t-caption { font-size:13px; line-height:1.40; font-weight:500; }
.t-label   { font-size:11px; line-height:1.20; font-weight:600;
             letter-spacing:.06em; text-transform:uppercase; }
.muted  { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Icons: <svg class="icon"><use href="sprite.svg#name"/></svg> */
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* Cross-document view transitions: the bars hold still while content
   changes (banking frontend.md §9). A cross-fade, not a slide: staff move
   between list and detail screens all day. */
@view-transition { navigation: auto; }
.app-bar { view-transition-name: app-bar; }
.nav { view-transition-name: nav; }

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