/*
 * Ui engine — deprecated hand-authored components, pending removal.
 *
 * Ui::Legacy::Text and Ui::Legacy::Heading have no Figma master, so the
 * component generator does not emit them. They live under
 * Ui::Legacy as a stopgap; their CSS lives here, outside the generated
 * components.css, and is excluded from the codegen prune.
 *
 * Load order: alongside ui/components, e.g.
 *   stylesheet_link_tag "ui/reset", "ui/base", "ui/themes/indigo", "ui/components", "ui/legacy"
 */

/* ============================================================
   Ui::Heading — display-style heading using the headline font.
   ============================================================ */

.ui-heading {
  margin: 0;
  font-family: var(--font-family-headline);
  letter-spacing: var(--letter-spacing-0);
  -webkit-text-box-trim: both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.ui-heading--xs {
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
}

.ui-heading--sm {
  font-size: var(--font-size-28);
  line-height: var(--line-height-38);
}

.ui-heading--md {
  font-size: var(--font-size-32);
  line-height: var(--line-height-44);
}

.ui-heading--medium { font-weight: var(--font-weight-medium); }
.ui-heading--bold   { font-weight: var(--font-weight-bold); }

.ui-heading--color-primary   { color: var(--color-text-neutral-dark); }
.ui-heading--color-secondary { color: var(--color-text-neutral-medium); }
.ui-heading--color-brand     { color: var(--color-text-brand-primary); }
.ui-heading--color-inverse   { color: var(--color-text-inverse-primary); }

.ui-heading--align-start  { text-align: start; }
.ui-heading--align-center { text-align: center; }
.ui-heading--align-end    { text-align: end; }

/* ============================================================
   Ui::Text — body text using the paragraph font.
   ============================================================ */

.ui-text {
  margin: 0;
  font-family: var(--font-family-paragraph);
  letter-spacing: var(--letter-spacing-0);
  -webkit-text-box-trim: both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.ui-text--xs { font-size: var(--font-size-12); line-height: var(--line-height-18); }
.ui-text--sm { font-size: var(--font-size-14); line-height: var(--line-height-24); }
.ui-text--md { font-size: var(--font-size-16); line-height: var(--line-height-26); }
.ui-text--lg { font-size: var(--font-size-18); line-height: var(--line-height-28); }
.ui-text--xl { font-size: var(--font-size-20); line-height: var(--line-height-30); }

.ui-text--regular  { font-weight: var(--font-weight-regular); }
.ui-text--medium   { font-weight: var(--font-weight-medium); }
.ui-text--semibold { font-weight: var(--font-weight-semibold); }
.ui-text--bold     { font-weight: var(--font-weight-bold); }

.ui-text--color-primary   { color: var(--color-text-neutral-dark); }
.ui-text--color-secondary { color: var(--color-text-neutral-medium); }
.ui-text--color-tertiary  { color: var(--color-text-neutral-light); }
.ui-text--color-brand     { color: var(--color-text-brand-primary); }
.ui-text--color-inverse   { color: var(--color-text-inverse-primary); }
.ui-text--color-error     { color: var(--color-text-danger-medium); }

.ui-text--align-start  { text-align: start; }
.ui-text--align-center { text-align: center; }
.ui-text--align-end    { text-align: end; }

/* ============================================================
   Firefox fallback — simulate text-box-trim with negative margins.
   Ignored by browsers that support `text-box-trim` natively.
   ============================================================ */

@supports not (text-box-trim: trim-both) {
  /* Ui::Heading — Space Grotesk */
  .ui-heading--xs { margin-block: -8px; }  /* 24/32 */
  .ui-heading--sm { margin-block: -9px; }  /* 28/38 */
  .ui-heading--md { margin-block: -11px; } /* 32/44 */

  /* Ui::Text — Work Sans */
  .ui-text--xs { margin-block: -5px; } /* 12/18 */
  .ui-text--sm { margin-block: -7px; } /* 14/24 */
  .ui-text--md { margin-block: -8px; } /* 16/26 */
  .ui-text--lg { margin-block: -8px; } /* 18/28 */
  .ui-text--xl { margin-block: -8px; } /* 20/30 */

  /* Ui::Legacy::Input label — Work Sans 16/28 */
  .ui-legacy-input__label { margin-block: -9px; }

  /* Ui::Legacy::Button label — Work Sans 16/26 */
  .ui-btn__label { margin-block: -8px; }
}



/* ============================================================
   Ui::Legacy::Button — primary interactive control.
   ============================================================ */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  min-height: var(--touch-target-min);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-26);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  border: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  text-decoration: none;
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-btn--primary {
  background-color: var(--color-background-brand-default);
  color: var(--color-text-inverse-primary);
}

.ui-btn--secondary {
  background-color: var(--color-surface-white);
  color: var(--color-text-neutral-medium);
  border: 1px solid var(--color-border-neutral-light);
}

.ui-btn--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-subtle);
}

.ui-btn--tertiary {
  background-color: var(--color-surface-light);
  color: var(--color-text-brand-primary);
}

.ui-btn--tertiary:hover:not(:disabled) {
  background-color: var(--color-background-brand-light);
}

.ui-btn__label {
  display: block;
  -webkit-text-box-trim: both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.ui-btn--full {
  width: 100%;
}

/* ============================================================
   Ui::Legacy::Input — labelled form input.
   (classes namespaced ui-legacy-input* to avoid colliding with the
    regenerated Ui::Input, which reuses .ui-input*)
   ============================================================ */

.ui-legacy-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
}

.ui-legacy-input__label {
  display: block;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-28);
  color: var(--color-text-neutral-dark);
  -webkit-text-box-trim: both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.ui-legacy-input__field {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-border-neutral-light);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-paragraph);
  font-size: var(--input-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-24);
  color: var(--color-text-neutral-dark);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-legacy-input__field::placeholder {
  color: var(--color-text-neutral-light);
}

.ui-legacy-input__field:focus {
  outline: none;
  border-color: var(--color-border-brand-secondary);
  box-shadow: 0 0 0 3px var(--color-border-brand-tertiary);
}

.ui-legacy-input__field:disabled {
  cursor: not-allowed;
  background-color: var(--color-surface-light);
  border-color: var(--color-border-neutral-medium);
  color: var(--color-text-neutral-light);
}

.ui-legacy-input__help {
  margin: 0;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-24);
  color: var(--color-text-neutral-medium);
}