/*
 * TESSARAKT Fund Management System
 * Phase 1 — Reusable UI Foundations
 *
 * All classes in this file are opt-in and use the `ui-` namespace.
 * Existing application markup is intentionally not migrated in this sprint.
 */

/* Typography */
.ui-page-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.ui-section-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-snug);
}

.ui-card-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-snug);
  text-transform: uppercase;
}

.ui-table-header-text {
  color: var(--color-text-secondary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-snug);
  text-transform: uppercase;
}

.ui-table-body-text {
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-normal);
}

.ui-label {
  display: block;
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-snug);
  text-transform: uppercase;
}

.ui-helper-text {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.ui-field-error {
  margin: 0;
  color: var(--color-danger);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.ui-validation-message {
  margin: 0;
  color: var(--color-danger);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* Buttons */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--button-height);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  padding: 0 var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* Sprint 3 naming aliases. Legacy opt-in foundation names remain supported. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--button-height);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.ui-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.ui-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
}

.ui-btn:focus-visible,
.ui-btn-icon:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"],
.ui-btn-icon:disabled,
.ui-btn-icon[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.ui-btn-primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.ui-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.08);
}

.ui-btn-secondary {
  background: var(--color-action-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.ui-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-action-secondary-hover);
  border-color: var(--color-border-strong);
}

.ui-btn-danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.36);
  color: var(--color-danger);
}

.ui-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--color-danger);
}

.ui-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.ui-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.ui-btn-icon {
  display: inline-grid;
  width: var(--size-control-md);
  height: var(--size-control-md);
  place-items: center;
  margin: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--button-radius);
  padding: 0;
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.ui-btn-icon:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.ui-button:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-icon-button:disabled,
.ui-icon-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.ui-button--primary {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.08);
}

.ui-button--secondary {
  background: var(--color-action-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.ui-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-action-secondary-hover);
  border-color: var(--color-border-strong);
}

.ui-button--danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.36);
  color: var(--color-danger);
}

.ui-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--color-danger);
}

.ui-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.ui-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.ui-button--small {
  min-height: var(--size-control-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
}

.ui-button--large {
  min-height: var(--size-control-lg);
  padding-inline: var(--space-5);
  font-size: var(--font-size-base);
}

.ui-icon-button {
  display: inline-grid;
  width: var(--size-control-md);
  height: var(--size-control-md);
  place-items: center;
  margin: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--button-radius);
  padding: 0;
  background: var(--color-bg-surface-subtle);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.ui-icon-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.ui-icon-button > svg,
.ui-button__icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: 0 0 auto;
}

/* Cards */
.ui-card {
  min-width: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: var(--card-shadow);
}

.ui-card--flat {
  box-shadow: var(--shadow-none);
}

.ui-card--subtle {
  background: var(--color-bg-surface-subtle);
  box-shadow: var(--shadow-sm);
}

.ui-card--interactive {
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

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

.ui-card--interactive:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring), var(--shadow-lg);
}

.ui-card__header,
.ui-card__footer,
.ui-card-header,
.ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ui-card__body,
.ui-card-body {
  margin-top: var(--space-4);
}

.ui-card__footer,
.ui-card-footer {
  margin-top: var(--space-5);
}

/* Native form choices remain opt-in and inherit the design tokens. */
.ui-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  cursor: pointer;
}

.ui-checkbox,
.ui-radio {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: 0;
  border: 1px solid var(--color-border-strong);
  accent-color: var(--color-action-primary);
  cursor: pointer;
}

.ui-checkbox:focus-visible,
.ui-radio:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.ui-checkbox:disabled,
.ui-radio:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Form controls */
.ui-field {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--input-radius);
  padding: 0 var(--space-3);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.ui-input,
.ui-select {
  height: var(--input-height);
}

.ui-textarea {
  min-height: 6rem;
  padding-block: var(--space-3);
  resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: var(--opacity-muted);
}

.ui-input:hover:not(:disabled),
.ui-select:hover:not(:disabled),
.ui-textarea:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: 0;
  border-color: var(--color-action-primary);
  box-shadow: var(--focus-ring);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input[readonly],
.ui-textarea[readonly] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ui-input[aria-invalid="true"]:focus,
.ui-select[aria-invalid="true"]:focus,
.ui-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24);
}

/* Opt-in layout helpers for future component composition */
.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ui-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 980px) {
  .ui-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-btn,
  .ui-btn-icon,
  .ui-icon-button,
  .ui-card--interactive,
  .ui-input,
  .ui-select,
  .ui-textarea {
    transition: none;
  }
}