/*
 * Motion Lab UI primitives.
 *
 * Scope: product chrome only (header, catalogues, courses, panels, controls).
 * Experiments and the 54 website editions keep their own visual language and
 * must not be forced into these primitives.
 *
 * Rules for this file:
 * - every value comes from tokens.css;
 * - a primitive owns its states (hover, active, focus, disabled, pressed);
 * - pages may compose primitives, not restyle their internals.
 */

/* Typography roles ------------------------------------------------------- */

.ui-display {
  font-size: var(--type-display-size);
  font-weight: 600;
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}

.ui-page-title {
  max-width: 18ch;
  font-size: var(--type-page-size);
  font-weight: 600;
  line-height: var(--type-page-leading);
  letter-spacing: var(--type-page-tracking);
}

.ui-section-title {
  font-size: var(--type-section-size);
  font-weight: 600;
  line-height: var(--type-section-leading);
  letter-spacing: var(--type-section-tracking);
}

.ui-card-title {
  font-size: var(--type-card-size);
  font-weight: 600;
  line-height: var(--type-card-leading);
  letter-spacing: var(--type-card-tracking);
}

.ui-body {
  max-width: var(--measure-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.ui-lead {
  max-width: var(--measure-lead);
  color: var(--ink-2);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.ui-small {
  color: var(--ink-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

.ui-meta {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--type-meta-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--type-meta-leading);
}

.ui-eyebrow {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  line-height: var(--type-eyebrow-leading);
  text-transform: uppercase;
}

.ui-text-link {
  color: var(--ink-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  text-decoration: none;
}

.ui-text-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons ---------------------------------------------------------------- */

.ui-button,
.ws-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-small-size);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-feedback) var(--motion-ease-feedback),
    border-color var(--motion-feedback) var(--motion-ease-feedback),
    color var(--motion-feedback) var(--motion-ease-feedback),
    box-shadow var(--motion-feedback) var(--motion-ease-feedback),
    transform var(--motion-feedback) var(--motion-ease-feedback);
}

.ui-button:hover,
.ws-button:hover {
  border-color: var(--line-strong);
  text-decoration: none;
}

.ui-button:active:not(:disabled),
.ws-button:active:not(:disabled) {
  transform: scale(0.97);
}

.ui-button:disabled,
.ws-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-button[aria-pressed="true"],
.ui-button[aria-expanded="true"],
.ws-button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.ui-button-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.ui-button-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.ui-button-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.ui-button-quiet:hover {
  border-color: transparent;
  background: var(--surface-3);
  color: var(--ink);
}

.ui-button-lg {
  min-height: 46px;
  padding: 13px 22px;
  gap: 10px;
  font-size: var(--type-cta-size);
}

.ui-button-soft {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.ui-button-sm {
  min-height: 30px;
  padding: 6px 11px;
  font-size: var(--type-meta-size);
}

.ui-icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--type-small-size);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--motion-feedback) var(--motion-ease-feedback),
    border-color var(--motion-feedback) var(--motion-ease-feedback),
    color var(--motion-feedback) var(--motion-ease-feedback),
    transform var(--motion-feedback) var(--motion-ease-feedback);
}

.ui-icon-button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}

.ui-icon-button:active:not(:disabled) {
  transform: scale(0.94);
}

.ui-icon-button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

/* Chips and tags --------------------------------------------------------- */

.ui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--type-meta-size);
  line-height: 1.3;
  white-space: nowrap;
  transition:
    background-color var(--motion-feedback) var(--motion-ease-feedback),
    border-color var(--motion-feedback) var(--motion-ease-feedback),
    color var(--motion-feedback) var(--motion-ease-feedback);
}

.ui-chip:hover {
  background: var(--surface);
  color: var(--ink);
}

.ui-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: var(--type-meta-size);
  line-height: 1.35;
}

/* Fields ----------------------------------------------------------------- */

.ui-field {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-small-size);
  line-height: 1.4;
  transition:
    border-color var(--motion-feedback) var(--motion-ease-feedback),
    box-shadow var(--motion-feedback) var(--motion-ease-feedback);
}

.ui-field:hover {
  border-color: var(--line-strong);
}

.ui-field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ui-field-pill {
  border-radius: var(--r-pill);
}

.ui-field-sm {
  min-height: 36px;
  padding: 8px 12px;
  font-size: var(--type-meta-size);
}

/* Surfaces and layout ---------------------------------------------------- */

.ui-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.ui-card-compact {
  border-radius: var(--r-md);
}

.ui-card-interactive {
  transition:
    transform var(--motion-switch) var(--motion-ease-switch),
    box-shadow var(--motion-switch) var(--motion-ease-switch),
    border-color var(--motion-switch) var(--motion-ease-switch);
}

.ui-card-interactive:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.ui-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ui-callout {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}

/* Motion preferences ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ws-button,
  .ui-icon-button,
  .ui-chip,
  .ui-field,
  .ui-card-interactive {
    transition: none;
  }

  .ui-card-interactive:hover {
    transform: none;
  }
}

:root[data-motion="reduced"] .ui-card-interactive:hover,
:root[data-motion="none"] .ui-card-interactive:hover {
  transform: none;
}