/* ============================================================================
   BASE — reset, text styles, focus ring, page shell
   FE Client (FE.C). Semantic tokens only.
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  /* `surface/sunken` — DESIGN.md §4.3 describes it as the "background behind
     cards", which is exactly this layout: every region is a raised card on a
     recessed page. `surface/page` is left defined but unused here; using it
     would put the page and the cards on the same value in Light (both
     Neutral/100) and leave the cards with no edge to read against. */
  background: var(--color-surface-sunken);
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* --- Focus ring ------------------------------------------------------------
   DESIGN.md §7: colour border/focus, width shape/focus-width, offset
   shape/focus-offset, :focus-visible ONLY.
   The DS has no focus state on most components (5 of ~300) — root CLAUDE.md
   says implement it, so this is the single place it is defined. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

/* --- Text styles — DESIGN.md §5.4 (the subset this app uses) --------------- */
.txt-heading-xl {
  font-family: var(--font-family-display);
  font-size: var(--font-heading-xl-size);
  line-height: var(--font-heading-xl-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-heading);
  color: var(--color-content-headline);
}
.txt-heading-lg {
  font-family: var(--font-family-display);
  font-size: var(--font-heading-lg-size);
  line-height: var(--font-heading-lg-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-heading);
  color: var(--color-content-headline);
}
.txt-heading-sm {
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
  color: var(--color-content-headline);
}
/* Heading/SM Medium — the DS's `Row / Section Title` label. Same step as
   .txt-heading-sm, one weight down; both styles exist in the 39. */
.txt-heading-sm-medium {
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-default);
  color: var(--color-content-headline);
}
.txt-body-md {
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
}
.txt-body-md-medium {
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-default);
}
.txt-body-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
}
.txt-label-md {
  font-family: var(--font-family-text);
  font-size: var(--font-label-md-size);
  line-height: var(--font-label-md-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-default);
}
.txt-label-sm {
  font-family: var(--font-family-text);
  font-size: var(--font-label-sm-size);
  line-height: var(--font-label-sm-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-default);
}

/* --- Screen-reader-only --------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible only on keyboard focus. */
.skip-link {
  position: absolute;
  z-index: 100; /* TODO(tokens): z-index scale not built — DESIGN.md §12.4 */
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-solid-brand-default);
  color: var(--color-on-solid-brand);
  border-radius: var(--shape-radius-button);
  transform: translateY(calc(-100% - var(--space-2xl)));
  transition: transform 120ms ease; /* TODO(tokens): motion scale not built */
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* #main takes focus programmatically (skip link, and the telehealth flow
   returning focus on close). It is not interactive, so it gets no ring —
   :focus-visible above never matches a programmatic focus on it anyway, and
   this keeps the UA default off. */
#main:focus {
  outline: none;
}