/* @upas/web-ui v0.1.0 | Shared visual primitives for UPAS web properties. */

:root {
  --upas-ui-color-night: #03070d;
  --upas-ui-color-night-soft: #050b12;
  --upas-ui-color-panel: #111827;
  --upas-ui-color-panel-raised: #1f2937;
  --upas-ui-color-surface: #ffffff;
  --upas-ui-color-surface-soft: #f4f4f5;
  --upas-ui-color-text: #071d36;
  --upas-ui-color-text-muted: #667085;
  --upas-ui-color-text-on-dark: #f8fafc;
  --upas-ui-color-text-muted-on-dark: #a8b0bb;
  --upas-ui-color-border: #d0d5dd;
  --upas-ui-color-border-on-dark: rgba(255, 255, 255, .14);
  --upas-ui-color-focus: #ffffff;
  --upas-ui-font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --upas-ui-font-heading: "Sora", "Segoe UI Variable Display", "Aptos Display", "Segoe UI", Arial, sans-serif;
  --upas-ui-radius-control: .5rem;
  --upas-ui-radius-panel: .75rem;
  --upas-ui-shadow-panel: 0 8px 20px rgba(7, 29, 54, .04);
  --upas-ui-duration-fast: 180ms;
  --upas-ui-ease-standard: ease;
}
.upas-ui-eyebrow,
:where(.eyebrow) {
  width: max-content;
  max-width: 100%;
  margin-block: 0 .6875rem;
  font-family: var(--upas-ui-font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.upas-ui-sr-only,
:where(.screen-reader-text) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upas-ui-external-link {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .34em;
}

.upas-ui-external-link-icon,
:where(.external-link-icon) {
  display: inline-block;
  width: .88rem;
  height: .88rem;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -.1em;
}

.upas-ui-focus-ring:focus-visible {
  outline: 2px solid var(--upas-ui-color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --upas-ui-duration-fast: 0ms;
  }
}