/*
 * Foundation adapters generated from the canonical W3C DTCG contract.
 * This layer maps shared tokens to framework-neutral layout and type hooks.
 */
@import url("./health-eye-tokens.css");

:root {
  --he-font-family-display-stack: var(--he-font-family-display), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --he-font-family-body-stack: var(--he-font-family-body), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --he-font-family-mono-stack: var(--he-font-family-mono), "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --he-type-display-xl-size: var(--he-font-fluid-size-display-xl);
  --he-type-display-lg-size: var(--he-font-fluid-size-display-lg);
  --he-type-display-md-size: var(--he-font-fluid-size-display-md);
  --he-type-heading-h1-size: var(--he-font-fluid-size-heading-h1);
  --he-type-heading-h2-size: var(--he-font-fluid-size-heading-h2);
  --he-type-heading-h3-size: var(--he-font-fluid-size-heading-h3);
  --he-type-heading-h4-size: var(--he-font-size-xl);
  --he-type-heading-h5-size: var(--he-font-size-lg);
  --he-type-heading-h6-size: var(--he-font-size-md);
  --he-type-body-xl-size: var(--he-font-size-xl);
  --he-type-body-lg-size: var(--he-font-size-lg);
  --he-type-body-md-size: var(--he-font-size-md);
  --he-type-body-sm-size: var(--he-font-size-sm);
  --he-type-label-lg-size: var(--he-font-size-md);
  --he-type-label-md-size: var(--he-font-size-sm);
  --he-type-label-sm-size: var(--he-font-size-xs);
  --he-type-caption-size: var(--he-font-size-xs);
  --he-type-code-lg-size: var(--he-font-size-md);
  --he-type-code-md-size: var(--he-font-size-sm);
  --he-type-code-sm-size: var(--he-font-size-xs);
}

:where(html) {
  color: var(--he-color-text-primary);
  background: var(--he-color-background-canvas);
  font-family: var(--he-font-family-body-stack);
  font-size: var(--he-font-role-body-size);
  font-weight: var(--he-font-role-body-weight);
  line-height: var(--he-font-role-body-line-height);
  letter-spacing: var(--he-font-role-body-letter-spacing);
}

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

:where(:focus-visible) {
  outline: var(--he-border-width-focus) solid var(--he-color-focus-ring);
  outline-offset: var(--he-space-1);
}

:where([aria-disabled="true"], :disabled) {
  cursor: not-allowed;
  opacity: var(--he-opacity-disabled);
}

.he-type-display,
.he-type-heading,
.he-type-title,
.he-type-body,
.he-type-label,
.he-type-mono {
  margin-block: 0;
}

.he-type-display {
  font: var(--he-font-role-display-weight) var(--he-type-display-xl-size) / var(--he-font-role-display-line-height) var(--he-font-family-display-stack);
  letter-spacing: var(--he-font-role-display-letter-spacing);
}

.he-type-heading {
  font: var(--he-font-role-heading-weight) var(--he-type-heading-h1-size) / var(--he-font-role-heading-line-height) var(--he-font-family-display-stack);
  letter-spacing: var(--he-font-role-heading-letter-spacing);
}

.he-type-title {
  font: var(--he-font-role-title-weight) var(--he-type-heading-h4-size) / var(--he-font-role-title-line-height) var(--he-font-family-display-stack);
  letter-spacing: var(--he-font-role-title-letter-spacing);
}

.he-type-body {
  font: var(--he-font-role-body-weight) var(--he-type-body-md-size) / var(--he-font-role-body-line-height) var(--he-font-family-body-stack);
  letter-spacing: var(--he-font-role-body-letter-spacing);
}

.he-type-label {
  font: var(--he-font-role-label-weight) var(--he-type-label-md-size) / var(--he-font-role-label-line-height) var(--he-font-family-body-stack);
  letter-spacing: var(--he-font-role-label-letter-spacing);
}

.he-type-mono {
  font: var(--he-font-role-mono-weight) var(--he-type-code-md-size) / var(--he-font-role-mono-line-height) var(--he-font-family-mono-stack);
  letter-spacing: var(--he-font-role-mono-letter-spacing);
  font-variant-numeric: tabular-nums;
}

.he-prose {
  max-inline-size: var(--he-font-measure-default);
}

.he-type-numeric-prose {
  font-variant-numeric: proportional-nums lining-nums;
}

.he-type-numeric-data {
  font-variant-numeric: tabular-nums lining-nums;
}

.he-type-identifier {
  font-family: var(--he-font-family-mono-stack);
  font-variant-numeric: tabular-nums slashed-zero;
}

.he-layout-grid {
  --he-active-grid-columns: var(--he-layout-grid-columns-compact);
  --he-active-grid-gap: var(--he-layout-grid-gap-compact);
  display: grid;
  grid-template-columns: repeat(var(--he-active-grid-columns), minmax(0, 1fr));
  gap: var(--he-active-grid-gap);
  width: min(100% - (2 * var(--he-layout-gutter-mobile)), var(--he-layout-content-standard));
  margin-inline: auto;
}

@media (min-width: 760px) {
  .he-layout-grid {
    --he-active-grid-columns: var(--he-layout-grid-columns-tablet);
    --he-active-grid-gap: var(--he-layout-grid-gap-tablet);
    width: min(100% - (2 * var(--he-layout-gutter-tablet)), var(--he-layout-content-standard));
  }
}

@media (min-width: 1024px) {
  .he-layout-grid {
    --he-active-grid-columns: var(--he-layout-grid-columns-desktop);
    --he-active-grid-gap: var(--he-layout-grid-gap-desktop);
    width: min(100% - (2 * var(--he-layout-gutter-desktop)), var(--he-layout-content-standard));
  }
}

:where([data-he-data-state]) {
  color: var(--he-data-state-text);
  background-color: var(--he-data-state-background);
  border-color: var(--he-data-state-border);
}

[data-he-data-state="synchronized"] {
  --he-data-state-background: var(--he-color-data-state-synchronized-background);
  --he-data-state-text: var(--he-color-data-state-synchronized-text);
  --he-data-state-border: var(--he-color-data-state-synchronized-border);
}

[data-he-data-state="delayed"] {
  --he-data-state-background: var(--he-color-data-state-delayed-background);
  --he-data-state-text: var(--he-color-data-state-delayed-text);
  --he-data-state-border: var(--he-color-data-state-delayed-border);
}

[data-he-data-state="stale"] {
  --he-data-state-background: var(--he-color-data-state-stale-background);
  --he-data-state-text: var(--he-color-data-state-stale-text);
  --he-data-state-border: var(--he-color-data-state-stale-border);
}

[data-he-data-state="offline"] {
  --he-data-state-background: var(--he-color-data-state-offline-background);
  --he-data-state-text: var(--he-color-data-state-offline-text);
  --he-data-state-border: var(--he-color-data-state-offline-border);
}

[data-he-data-state="unknown"] {
  --he-data-state-background: var(--he-color-data-state-unknown-background);
  --he-data-state-text: var(--he-color-data-state-unknown-text);
  --he-data-state-border: var(--he-color-data-state-unknown-border);
}

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