/*
 * Momentum Grids design-system foundation.
 *
 * This file is intentionally opt-in. Custom properties are globally available,
 * while visual rules only apply to the explicit .mg-* classes below.
 */

:root {
  /*
   * Color
   *
   * The legacy theme registry owns the current theme values. These aliases let
   * new opt-in components follow that server-rendered theme without restyling
   * legacy pages. Fallbacks keep this file independently usable.
   */
  --mg-bg-app: var(--theme-page-background, #f7f7f5);
  --mg-bg-surface: var(--theme-surface-background, #ffffff);
  --mg-bg-surface-subtle: var(--theme-surface-muted, #f1f1ef);
  --mg-bg-elevated: var(--theme-card-background, #ffffff);
  --mg-bg-hover: var(--theme-control-background-soft, rgba(29, 29, 31, 0.055));
  --mg-bg-active: color-mix(in srgb, var(--theme-text-primary, #1d1d1f) 9%, transparent);

  --mg-text-primary: var(--theme-text-primary, #1d1d1f);
  --mg-text-secondary: var(--theme-text-secondary, #6e6e73);
  --mg-text-tertiary: var(--theme-text-muted, #86868b);
  --mg-text-inverse: var(--theme-primary-button-text, #ffffff);

  --mg-border-subtle: color-mix(in srgb, var(--theme-border, rgba(29, 29, 31, 0.08)) 72%, transparent);
  --mg-border-default: var(--theme-border, rgba(29, 29, 31, 0.14));
  --mg-border-strong: var(--theme-border-strong, rgba(29, 29, 31, 0.24));

  --mg-accent: var(--theme-accent, #007aff);
  --mg-accent-hover: var(--theme-accent-deep, #006ee6);
  --mg-accent-soft: var(--theme-accent-soft, rgba(0, 122, 255, 0.1));

  --mg-success: var(--theme-success, #2f7d4f);
  --mg-success-soft: rgba(47, 125, 79, 0.1);
  --mg-warning: var(--theme-warning, #946200);
  --mg-warning-soft: rgba(148, 98, 0, 0.1);
  --mg-danger: var(--theme-danger, #b42318);
  --mg-danger-soft: var(--theme-danger-soft, rgba(180, 35, 24, 0.09));
  --mg-glass-background: color-mix(in srgb, var(--mg-bg-elevated) 78%, transparent);
  --mg-glass-highlight: color-mix(in srgb, var(--mg-text-inverse) 68%, transparent);

  /* Typography */
  --mg-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mg-font-size-display: 2.5rem;
  --mg-font-size-page-title: 2rem;
  --mg-font-size-section-title: 1.375rem;
  --mg-font-size-component-title: 1rem;
  --mg-font-size-body: 0.9375rem;
  --mg-font-size-body-small: 0.875rem;
  --mg-font-size-metadata: 0.8125rem;
  --mg-font-size-micro: 0.75rem;
  --mg-font-weight-regular: 400;
  --mg-font-weight-medium: 500;
  --mg-font-weight-semibold: 600;
  --mg-line-height-tight: 1.2;
  --mg-line-height-compact: 1.35;
  --mg-line-height-body: 1.5;
  --mg-letter-spacing-tight: -0.015em;
  --mg-letter-spacing-label: 0.04em;

  /* Spacing */
  --mg-space-1: 4px;
  --mg-space-2: 8px;
  --mg-space-3: 12px;
  --mg-space-4: 16px;
  --mg-space-5: 20px;
  --mg-space-6: 24px;
  --mg-space-8: 32px;
  --mg-space-10: 40px;
  --mg-space-12: 48px;
  --mg-space-16: 64px;
  --mg-space-20: 80px;

  /* Shape and borders */
  --mg-radius-sm: 8px;
  --mg-radius-md: 12px;
  --mg-radius-lg: 16px;
  --mg-radius-xl: 20px;
  --mg-radius-pill: 999px;
  --mg-border-width-hairline: 1px;

  /* Depth */
  --mg-shadow-xs: 0 1px 2px rgba(29, 29, 31, 0.06);
  --mg-shadow-sm: 0 4px 14px rgba(29, 29, 31, 0.08);
  --mg-shadow-floating: 0 16px 40px rgba(29, 29, 31, 0.13);

  /* Motion */
  --mg-duration-fast: 140ms;
  --mg-duration-standard: 200ms;
  --mg-duration-slow: 280ms;
  --mg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mg-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Interaction */
  --mg-control-height: 42px;
  --mg-control-height-compact: 36px;
  --mg-focus-width: 3px;
  --mg-focus-offset: 2px;
  --mg-focus-color: var(--mg-accent);

  /* Future application shell */
  --mg-content-max: 1240px;
  --mg-page-gutter: 40px;
  --mg-sidebar-width: 232px;
  --mg-sidebar-width-collapsed: 68px;
}

/* Layout and surface primitives */
.mg-page {
  min-width: 0;
  background: var(--mg-bg-app);
  color: var(--mg-text-primary);
  font-family: var(--mg-font-sans);
  font-size: var(--mg-font-size-body);
  font-weight: var(--mg-font-weight-regular);
  line-height: var(--mg-line-height-body);
}

.mg-page-inner {
  width: min(100%, var(--mg-content-max));
  margin-inline: auto;
  padding-inline: var(--mg-page-gutter);
}

.mg-section {
  display: grid;
  min-width: 0;
  gap: var(--mg-space-4);
}

.mg-surface,
.mg-surface-subtle {
  min-width: 0;
  padding: var(--mg-space-6);
  border: var(--mg-border-width-hairline) solid var(--mg-border-subtle);
  border-radius: var(--mg-radius-lg);
  box-shadow: none;
}

.mg-surface {
  background: var(--mg-bg-surface);
}

.mg-surface-subtle {
  border-color: transparent;
  background: var(--mg-bg-surface-subtle);
}

.mg-divider {
  width: 100%;
  height: var(--mg-border-width-hairline);
  margin: 0;
  border: 0;
  background: var(--mg-border-subtle);
}

/*
 * Floating material only. The solid base is the fallback for browsers without
 * backdrop-filter support and for users who request reduced transparency.
 */
.mg-glass {
  border: var(--mg-border-width-hairline) solid var(--mg-border-default);
  background: var(--mg-bg-elevated);
  box-shadow: var(--mg-shadow-floating);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mg-glass {
    border-color: var(--mg-glass-highlight);
    background: var(--mg-glass-background);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
  }
}

/* Button primitive */
.mg-button {
  display: inline-flex;
  min-height: var(--mg-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  padding: 0 var(--mg-space-4);
  border: var(--mg-border-width-hairline) solid transparent;
  border-radius: var(--mg-radius-md);
  background: transparent;
  color: var(--mg-text-primary);
  font-family: var(--mg-font-sans);
  font-size: var(--mg-font-size-body-small);
  font-weight: var(--mg-font-weight-semibold);
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  transition:
    background-color var(--mg-duration-fast) var(--mg-ease-standard),
    border-color var(--mg-duration-fast) var(--mg-ease-standard),
    color var(--mg-duration-fast) var(--mg-ease-standard),
    transform var(--mg-duration-fast) var(--mg-ease-standard);
}

.mg-button--primary {
  background: var(--mg-text-primary);
  color: var(--mg-text-inverse);
}

.mg-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--mg-bg-hover);
  color: var(--mg-text-primary);
  border-color: transparent;
  transform: none;
}

.mg-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #343438;
  color: var(--mg-text-inverse);
}

.mg-button--secondary {
  border-color: var(--mg-border-default);
  background: var(--mg-bg-surface);
}

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

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

.mg-button--danger {
  border-color: rgba(180, 35, 24, 0.18);
  background: var(--mg-danger-soft);
  color: var(--mg-danger);
}

.mg-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.14);
  color: var(--mg-danger);
}

.mg-button:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--mg-bg-active);
  opacity: 1;
  transform: translateY(1px);
}

.mg-button--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: #45454a;
}

.mg-button--danger:active:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(180, 35, 24, 0.18);
}

.mg-button:focus-visible,
.mg-input:focus-visible,
.mg-textarea:focus-visible,
.mg-select:focus-visible,
.mg-segmented__item:focus-visible {
  outline: var(--mg-focus-width) solid var(--mg-focus-color);
  outline-offset: var(--mg-focus-offset);
}

.mg-button:disabled,
.mg-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.mg-button[aria-disabled="true"] {
  pointer-events: none;
}

/* Form control primitives */
.mg-input,
.mg-textarea,
.mg-select {
  width: 100%;
  min-height: var(--mg-control-height);
  padding: var(--mg-space-2) var(--mg-space-3);
  border: var(--mg-border-width-hairline) solid var(--mg-border-default);
  border-radius: var(--mg-radius-md);
  background: var(--mg-bg-surface);
  color: var(--mg-text-primary);
  font-family: var(--mg-font-sans);
  font-size: var(--mg-font-size-body);
  line-height: var(--mg-line-height-compact);
  transition:
    background-color var(--mg-duration-fast) var(--mg-ease-standard),
    border-color var(--mg-duration-fast) var(--mg-ease-standard);
}

.mg-input::placeholder,
.mg-textarea::placeholder {
  color: var(--mg-text-tertiary);
  opacity: 1;
}

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

.mg-input:focus-visible,
.mg-textarea:focus-visible,
.mg-select:focus-visible {
  border-color: var(--mg-accent);
}

.mg-input:disabled,
.mg-textarea:disabled,
.mg-select:disabled {
  background: var(--mg-bg-surface-subtle);
  color: var(--mg-text-tertiary);
  opacity: 0.7;
  cursor: not-allowed;
}

.mg-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Segmented control primitive */
.mg-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: var(--mg-border-width-hairline) solid var(--mg-border-subtle);
  border-radius: var(--mg-radius-md);
  background: var(--mg-bg-surface-subtle);
}

.mg-segmented__item {
  display: inline-flex;
  min-height: var(--mg-control-height-compact);
  align-items: center;
  justify-content: center;
  padding: 0 var(--mg-space-3);
  border: 0;
  border-radius: calc(var(--mg-radius-md) - 3px);
  background: transparent;
  color: var(--mg-text-secondary);
  font-family: var(--mg-font-sans);
  font-size: var(--mg-font-size-body-small);
  font-weight: var(--mg-font-weight-medium);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
  cursor: pointer;
  transition:
    background-color var(--mg-duration-fast) var(--mg-ease-standard),
    box-shadow var(--mg-duration-fast) var(--mg-ease-standard),
    color var(--mg-duration-fast) var(--mg-ease-standard);
}

.mg-segmented__item:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent;
  background: var(--mg-bg-hover);
  color: var(--mg-text-primary);
  transform: none;
}

.mg-segmented__item[aria-pressed="true"],
.mg-segmented__item[aria-selected="true"],
.mg-segmented__item[aria-current="true"],
.mg-segmented__item.is-active {
  background: var(--mg-bg-surface);
  color: var(--mg-text-primary);
  box-shadow: var(--mg-shadow-xs);
}

.mg-segmented__item:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--mg-bg-active);
  opacity: 1;
  transform: none;
}

.mg-segmented__item:disabled,
.mg-segmented__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.mg-segmented__item[aria-disabled="true"] {
  pointer-events: none;
}

@media (max-width: 1024px) {
  :root {
    --mg-page-gutter: 28px;
  }
}

@media (max-width: 640px) {
  :root {
    --mg-page-gutter: 18px;
  }

  .mg-surface,
  .mg-surface-subtle {
    padding: var(--mg-space-4);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mg-glass {
    border-color: var(--mg-border-default);
    background: var(--mg-bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-button,
  .mg-input,
  .mg-textarea,
  .mg-select,
  .mg-segmented__item {
    transition-duration: 0.01ms;
  }

  .mg-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}