/*
 * Megaservice Platform — Foundation CSS / P0.2.
 * Opt-in scope: .ms-ui. Load after tokens.css when integration is approved.
 * No template loads this asset yet; component styling belongs to later slices.
 */

/* Scope/base: typography only; the containing surface owns theme colors. */
.ms-ui {
  font-family: var(--ms-font-family-ui);
  font-size: var(--ms-type-body-size);
  font-weight: var(--ms-type-body-weight);
  line-height: var(--ms-type-body-line-height);
  letter-spacing: var(--ms-type-body-letter-spacing);
}

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

/* Typography: approved heading roles and basic reading rhythm. */
.ms-ui h1,
.ms-ui h2,
.ms-ui h3,
.ms-ui h4 {
  margin-block-start: var(--ms-space-0);
  margin-block-end: var(--ms-gap-related);
}

.ms-ui h1 {
  font-size: var(--ms-type-h1-size);
  font-weight: var(--ms-type-h1-weight);
  line-height: var(--ms-type-h1-line-height);
  letter-spacing: var(--ms-type-h1-letter-spacing);
}

.ms-ui h2 {
  font-size: var(--ms-type-h2-size);
  font-weight: var(--ms-type-h2-weight);
  line-height: var(--ms-type-h2-line-height);
  letter-spacing: var(--ms-type-h2-letter-spacing);
}

.ms-ui h3 {
  font-size: var(--ms-type-h3-size);
  font-weight: var(--ms-type-h3-weight);
  line-height: var(--ms-type-h3-line-height);
  letter-spacing: var(--ms-type-h3-letter-spacing);
}

.ms-ui h4 {
  font-size: var(--ms-type-h4-size);
  font-weight: var(--ms-type-h4-weight);
  line-height: var(--ms-type-h4-line-height);
  letter-spacing: var(--ms-type-h4-letter-spacing);
}

.ms-ui p {
  margin-block-start: var(--ms-space-0);
  margin-block-end: var(--ms-space-4);
}

.ms-ui small {
  font-size: var(--ms-type-body-small-size);
  line-height: var(--ms-type-body-small-line-height);
}

.ms-ui strong {
  font-weight: var(--ms-font-weight-bold);
}

/* Text links only; action exclusions add no specificity via :where(). */
.ms-ui a:where(:not(.btn, .ms-button)) {
  color: var(--ms-color-text-link);
  text-decoration-line: underline;
}

.ms-ui a:where(:not(.btn, .ms-button)):hover {
  color: var(--ms-color-text-link-hover);
}

/* Focus: includes the scope root if it is itself focusable. */
.ms-ui:focus-visible,
.ms-ui :focus-visible {
  outline: var(--ms-focus-width) var(--ms-focus-style) var(--ms-focus-color);
  outline-offset: var(--ms-focus-offset);
}

/* Media: preserve the complete image and its intrinsic proportions. */
.ms-ui img {
  max-width: 100%;
  height: auto;
}

/* Form controls: typography inheritance only, not visual components. */
.ms-ui button,
.ms-ui input,
.ms-ui select,
.ms-ui textarea {
  font: inherit;
  letter-spacing: inherit;
}

/*
 * Accessibility helper: keep content available to assistive technology.
 * Focus restores normal rendering, including when a descendant takes focus.
 * The 1px box and 50% clip are clipping geometry, not design spacing.
 */
.ms-ui .ms-visually-hidden:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--ms-space-0);
  margin: var(--ms-space-0);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout foundations: fluid public/form widths, with the mobile gutter. */
.ms-ui .ms-container {
  width: 100%;
  max-width: var(--ms-content-max-width-public);
  margin-inline: auto;
  padding-inline: var(--ms-page-padding-mobile);
}

.ms-ui .ms-container--form {
  max-width: var(--ms-content-max-width-form);
}

/* Separate adjacent sections without adding a leading page gap. */
.ms-ui .ms-section + .ms-section {
  margin-block-start: var(--ms-section-gap);
}

/* Surface primitive: opt-in grouping, not a universal card wrapper. */
.ms-ui .ms-surface {
  padding: var(--ms-inset-surface);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-default);
  border-radius: var(--ms-surface-radius);
  box-shadow: var(--ms-surface-shadow);
}

/*
 * Reduced motion: future effects must consume the existing duration tokens.
 * Override those tokens on their declaring scope; add no animations here.
 */
@media (prefers-reduced-motion: reduce) {
  .ms-ui {
    --ms-motion-duration-fast: var(--ms-motion-duration-reduced);
    --ms-motion-duration-normal: var(--ms-motion-duration-reduced);
    --ms-motion-duration-slow: var(--ms-motion-duration-reduced);
  }

  .ms-ui,
  .ms-ui::before,
  .ms-ui::after,
  .ms-ui *,
  .ms-ui *::before,
  .ms-ui *::after {
    animation: none;
    transition-duration: var(--ms-motion-duration-reduced);
    transition-delay: var(--ms-motion-duration-reduced);
  }
}