/**
 * SENVIQ Design System — base reset + typography scale.
 * Load order: tokens.css, then base.css, then whichever component
 * files a page needs (forms.css / components.css / overlays.css /
 * data.css / shell.css). Every rule below consumes tokens.css custom
 * properties — no hardcoded color/size value belongs in this file.
 */

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

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

body {
  margin: 0;
  background: var(--senviq-bg);
  color: var(--senviq-navy);
  font-family: var(--senviq-font-family);
  font-size: var(--senviq-fs-body);
  line-height: var(--senviq-lh-normal);
  -webkit-font-smoothing: antialiased;
}

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

/**
 * A single, consistent focus treatment — never removed without a
 * replacement (Prompt 43's own accessibility rule). `:focus-visible`
 * so a mouse click doesn't show the ring, but keyboard/AT navigation
 * always does.
 */
:focus-visible {
  outline: 2px solid var(--senviq-focus-ring);
  outline-offset: var(--senviq-focus-ring-offset);
  border-radius: var(--senviq-radius-sm);
}

/* ---- Typography scale — one class per documented type role (SENVIQ_DESIGN_TOKENS.md) ---- */

.senviq-text-display {
  font-size: var(--senviq-fs-display);
  font-weight: var(--senviq-fw-bold);
  line-height: var(--senviq-lh-tight);
  color: var(--senviq-navy);
  margin: 0;
}

.senviq-text-page-title {
  font-size: var(--senviq-fs-page-title);
  font-weight: var(--senviq-fw-bold);
  line-height: var(--senviq-lh-tight);
  color: var(--senviq-navy);
  margin: 0;
}

.senviq-text-section-title {
  font-size: var(--senviq-fs-section-title);
  font-weight: var(--senviq-fw-semibold);
  line-height: var(--senviq-lh-tight);
  color: var(--senviq-navy);
  margin: 0;
}

.senviq-text-card-title {
  font-size: var(--senviq-fs-card-title);
  font-weight: var(--senviq-fw-semibold);
  line-height: var(--senviq-lh-tight);
  color: var(--senviq-navy);
  margin: 0;
}

.senviq-text-body {
  font-size: var(--senviq-fs-body);
  font-weight: var(--senviq-fw-regular);
  line-height: var(--senviq-lh-normal);
  color: var(--senviq-navy);
}

.senviq-text-small {
  font-size: var(--senviq-fs-small);
  color: var(--senviq-muted);
  line-height: var(--senviq-lh-normal);
}

.senviq-text-label {
  font-size: var(--senviq-fs-label);
  font-weight: var(--senviq-fw-medium);
  letter-spacing: var(--senviq-ls-label);
  color: var(--senviq-navy);
}

.senviq-text-caption {
  font-size: var(--senviq-fs-caption);
  letter-spacing: var(--senviq-ls-caption);
  color: var(--senviq-muted);
}

.senviq-text-statistic {
  font-size: var(--senviq-fs-statistic);
  font-weight: var(--senviq-fw-bold);
  line-height: var(--senviq-lh-tight);
  color: var(--senviq-navy);
  font-variant-numeric: tabular-nums;
}

.senviq-text-muted {
  color: var(--senviq-muted);
}

/**
 * Visually-hidden-but-screen-reader-visible utility — for the label
 * text a screen reader needs when a control's visible label would be
 * redundant/absent (e.g. an icon-only IconButton's accessible name).
 * Never a substitute for a real visible label on a form field
 * (Prompt 43's own "do not rely on placeholder text as the only
 * label" rule applies here too — this is for icon-only controls
 * specifically, not a way around writing a visible label).
 */
.senviq-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;
}

/**
 * Prompt 45 — the App Shell's "skip to content" link (WCAG 2.4.1).
 * Visually hidden like .senviq-visually-hidden, but MUST become visible
 * on keyboard focus (unlike that class) — a skip link a sighted
 * keyboard user can't see land is not usable.
 */
.senviq-skip-link {
  position: absolute;
  top: -3rem;
  left: var(--senviq-space-4);
  z-index: var(--senviq-z-drawer);
  background: var(--senviq-navy);
  color: var(--senviq-white);
  padding: var(--senviq-space-2) var(--senviq-space-4);
  border-radius: var(--senviq-radius-md);
  text-decoration: none;
  font-weight: var(--senviq-fw-semibold);
  transition: top var(--senviq-duration-base) var(--senviq-easing-emphasized);
}
.senviq-skip-link:focus {
  top: var(--senviq-space-4);
}