/**
 * hx-text.css — Text SSOT
 * Token-driven. Mirrors Astryx Text: body, large, label, supporting, code.
 * 4-variant ready via data-theme + data-hx-vp.
 */

.hx-text {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--hx-fg);
}

.hx-text--large {
  font-size: var(--text-heading-4-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.hx-text--label {
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hx-text--supporting {
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  color: var(--hx-fg-muted);
}

.hx-text--code {
  font-family: var(--font-family-code);
  font-size: 0.9em;
  background: var(--hx-surface-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-inner);
}

.hx-text-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Color modifiers */
.hx-text--primary { color: var(--hx-fg); }
.hx-text--secondary { color: var(--hx-fg-muted); }
.hx-text--muted { color: var(--hx-fg-muted); }

/* Weight modifiers */
.hx-text--medium { font-weight: var(--font-weight-medium); }
.hx-text--semibold { font-weight: var(--font-weight-semibold); }
.hx-text--bold { font-weight: var(--font-weight-bold); }

/* Dark */
html[data-theme="dark"] .hx-text,
[data-theme="dark"] .hx-text {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-text--supporting,
[data-theme="dark"] .hx-text--supporting,
html[data-theme="dark"] .hx-text--secondary,
[data-theme="dark"] .hx-text--muted {
  color: var(--hx-fg-muted);
}
html[data-theme="dark"] .hx-text--code,
[data-theme="dark"] .hx-text--code {
  background: var(--hx-surface-subtle);
}

/* Mobile density */
[data-hx-vp="mobile"] .hx-text,
.is-mobile-vp .hx-text {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Colors — match view classes */
.hx-text--accent { color: var(--hx-primary); }
.hx-text--disabled { color: var(--hx-fg-muted); opacity: 0.6; }
.hx-text--placeholder { color: var(--hx-fg-muted); font-style: italic; }

/* Weight — match view classes */
.hx-text--w-normal { font-weight: var(--font-weight-normal); }
.hx-text--w-medium { font-weight: var(--font-weight-medium); }
.hx-text--w-semibold { font-weight: var(--font-weight-semibold); }
.hx-text--w-bold { font-weight: var(--font-weight-bold); }

/* Truncation */
.hx-text--truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hx-lines);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-text-box {
  max-width: 280px;
  border: 1px dashed var(--hx-line);
  padding: var(--spacing-2);
  border-radius: var(--radius-inner);
}
.hx-text-box--fixed { width: 200px; max-width: 200px; }
.hx-text-box--clip { overflow: hidden; }

/* Word break */
.hx-text--break-word { overflow-wrap: break-word; word-break: normal; }
.hx-text--break-all { word-break: break-all; }

/* Wrap */
.hx-text--wrap { white-space: normal; }
.hx-text--nowrap { white-space: nowrap; }
.hx-text--balance { text-wrap: balance; }
.hx-text--pretty { text-wrap: pretty; }

/* Demo layout */
.hx-text-demo { display: flex; flex-direction: column; gap: var(--spacing-3); }
.hx-text-demo--wide { max-width: 100%; }
.hx-text-demo__item { display: flex; flex-direction: column; gap: var(--spacing-1); }
.hx-text-demo__label { margin: 0; }