/*
 * mah-cohesion.css — MAH design-system cohesion layer (purely additive).
 *
 * Raises every MAH surface (public + member portal) to one consistent,
 * premium bar via OPT-IN utility classes — without overriding any existing
 * style. Every selector is prefixed `.mah-`; nothing matches a bare element
 * (*, body, html, div, a, button) or a pre-existing class (.v2-*, .gcc-*).
 * Removing the <link> reverts every `.mah-*` surface and touches nothing else.
 *
 * Built on the `--v2-*` token system (members-v2.css / members-gcc.css); every
 * token reference carries a literal fallback so utilities also render on public
 * pages that never define `.v2-scope`. Day + night safe (the few values the
 * token system doesn't theme are re-declared under [data-mah-theme="day"]).
 * Reduced-motion safe + keyboard-accessible (focus-visible rings).
 *
 * Loaded centrally via: <link rel="stylesheet" href="/js/mah-cohesion.css?v=1">
 */

/* 1. Local design tokens — derived from --v2-*, with hard fallbacks.
      Attached to .mah-scope so utilities work even outside .v2-scope. */

.mah-scope,
.mah-card,
.mah-panel,
.mah-section {
  /* Surfaces / lines / ink — derived from --v2-* with night-palette fallbacks */
  --mah-bg-1: var(--v2-bg-1, #0f141b);
  --mah-bg-2: var(--v2-bg-2, #131a22);
  --mah-bg-3: var(--v2-bg-3, #1a232e);
  --mah-line: var(--v2-line, rgba(255, 255, 255, 0.08));
  --mah-line-strong: var(--v2-line-strong, rgba(255, 255, 255, 0.16));
  --mah-ink-0: var(--v2-ink-0, #e9edf3);
  --mah-ink-1: var(--v2-ink-1, #b6bdc7);
  --mah-ink-2: var(--v2-ink-2, #9aa5b4);
  --mah-ink-3: var(--v2-ink-3, #6a7583);

  /* Accent + semantic (mint is the canonical MAH accent) */
  --mah-accent: var(--v2-mint, #6ad3b8);
  --mah-amber: var(--v2-amber, #f4b740);
  --mah-purple: var(--v2-purple, #a855f7);
  --mah-green: var(--v2-green, #22c55e);
  --mah-orange: var(--v2-orange, #f97316);
  --mah-danger: var(--v2-danger, #ff8f8f);

  /* Radius */
  --mah-radius-sm: var(--v2-radius-sm, 6px);
  --mah-radius: var(--v2-radius, 8px);
  --mah-radius-lg: 14px;

  /* Spacing scale (consistent rhythm across surfaces) */
  --mah-space-1: 0.25rem;
  --mah-space-2: 0.5rem;
  --mah-space-3: 0.75rem;
  --mah-space-4: 1rem;
  --mah-space-5: 1.5rem;
  --mah-space-6: 2rem;
  --mah-space-7: 3rem;

  /* Focus ring + motion */
  --mah-ring: 0 0 0 2px var(--mah-bg-1), 0 0 0 4px var(--mah-accent);
  --mah-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mah-dur: 0.16s;

  /* Elevation (kept subtle; works on parchment + night) */
  --mah-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12);
  --mah-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Day-mode tints for the literal-fallback shadows + soft accent washes.
   The --v2-* tokens already theme themselves; this only softens the bits
   that the token system doesn't cover so parchment never gets harsh. */
html[data-mah-theme="day"] .mah-scope,
html[data-mah-theme="day"] .mah-card,
html[data-mah-theme="day"] .mah-panel,
html[data-mah-theme="day"] .mah-section {
  --mah-shadow-1: 0 1px 2px rgba(22, 32, 60, 0.08);
  --mah-shadow-2: 0 8px 24px rgba(22, 32, 60, 0.1);
}

/* 2. Surfaces — card / panel */
.mah-card {
  background: var(--mah-bg-1);
  border: 1px solid var(--mah-line);
  border-radius: var(--mah-radius);
  padding: var(--mah-space-4);
  color: var(--mah-ink-1);
  box-shadow: var(--mah-shadow-1);
  transition:
    border-color var(--mah-dur) var(--mah-ease),
    box-shadow var(--mah-dur) var(--mah-ease),
    transform var(--mah-dur) var(--mah-ease);
}

.mah-card-soft {
  background: var(--mah-bg-2);
  border-color: var(--mah-line);
  box-shadow: none;
}

/* Interactive cards (only when explicitly opted in) */
.mah-card.mah-interactive {
  cursor: pointer;
}
.mah-card.mah-interactive:hover {
  border-color: var(--mah-line-strong);
  box-shadow: var(--mah-shadow-2);
  transform: translateY(-1px);
}

.mah-panel {
  background: var(--mah-bg-2);
  border: 1px solid var(--mah-line);
  border-radius: var(--mah-radius-lg);
  padding: var(--mah-space-5);
  color: var(--mah-ink-1);
}

/* 3. Typography helpers */
.mah-kicker {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mah-ink-3);
  line-height: 1;
  margin: 0;
}

.mah-kicker-accent {
  color: var(--mah-accent);
}

.mah-section-title {
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mah-ink-0);
  margin: 0;
  text-wrap: balance;
}

.mah-title {
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mah-ink-0);
  margin: 0;
}

.mah-lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mah-ink-2);
  margin: 0;
  text-wrap: pretty;
}

.mah-muted {
  color: var(--mah-ink-2);
}
.mah-faint {
  color: var(--mah-ink-3);
}

/* Honest-by-design label for aspirational / proposed content.
   MAH is pre-launch; intent must never read as established fact. */
.mah-aspirational {
  display: inline-flex;
  align-items: center;
  gap: var(--mah-space-1);
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed var(--mah-line-strong);
  background: transparent;
  color: var(--mah-ink-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 4. Pills / badges */
.mah-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mah-space-1);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mah-ink-3) 8%, transparent);
  border: 1px solid var(--mah-line);
  color: var(--mah-ink-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.mah-pill-accent {
  color: var(--mah-accent);
  border-color: color-mix(in srgb, var(--mah-accent) 35%, transparent);
  background: color-mix(in srgb, var(--mah-accent) 10%, transparent);
}
.mah-pill-amber {
  color: var(--mah-amber);
  border-color: color-mix(in srgb, var(--mah-amber) 35%, transparent);
  background: color-mix(in srgb, var(--mah-amber) 10%, transparent);
}
.mah-pill-purple {
  color: var(--mah-purple);
  border-color: color-mix(in srgb, var(--mah-purple) 35%, transparent);
  background: color-mix(in srgb, var(--mah-purple) 10%, transparent);
}
.mah-pill-green {
  color: var(--mah-green);
  border-color: color-mix(in srgb, var(--mah-green) 35%, transparent);
  background: color-mix(in srgb, var(--mah-green) 10%, transparent);
}
.mah-pill-danger {
  color: var(--mah-danger);
  border-color: color-mix(in srgb, var(--mah-danger) 35%, transparent);
  background: color-mix(in srgb, var(--mah-danger) 10%, transparent);
}

/* Small status dot for use inside pills/labels */
.mah-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}

/* 5. Buttons */
.mah-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mah-space-2);
  padding: 0.55rem 1rem;
  border-radius: var(--mah-radius);
  border: 1px solid var(--mah-line-strong);
  background: var(--mah-bg-2);
  color: var(--mah-ink-0);
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--mah-dur) var(--mah-ease),
    background var(--mah-dur) var(--mah-ease),
    color var(--mah-dur) var(--mah-ease),
    transform var(--mah-dur) var(--mah-ease);
}
.mah-btn:hover {
  border-color: var(--mah-accent);
  color: var(--mah-ink-0);
}
.mah-btn:active {
  transform: translateY(1px);
}

.mah-btn-primary {
  background: var(--mah-accent);
  border-color: var(--mah-accent);
  color: #07120f;
}
.mah-btn-primary:hover {
  filter: brightness(1.06);
  color: #07120f;
}

.mah-btn-ghost {
  background: transparent;
  border-color: var(--mah-line);
  color: var(--mah-ink-1);
}
.mah-btn-ghost:hover {
  border-color: var(--mah-line-strong);
  color: var(--mah-ink-0);
}

.mah-btn-sm {
  padding: 0.38rem 0.7rem;
  font-size: 0.78rem;
}

.mah-btn:disabled,
.mah-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 6. Layout utilities (opt-in flex helpers) */
.mah-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mah-space-3);
}
.mah-stack-sm {
  gap: var(--mah-space-2);
}
.mah-stack-lg {
  gap: var(--mah-space-5);
}

.mah-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mah-space-2);
}
.mah-cluster-between {
  justify-content: space-between;
}

.mah-section {
  padding-block: var(--mah-space-6);
}

.mah-divider {
  height: 1px;
  border: 0;
  background: var(--mah-line);
  margin-block: var(--mah-space-4);
}

/* 7. Focus-visible rings (keyboard accessibility) */
.mah-focusable:focus-visible,
.mah-btn:focus-visible,
.mah-card.mah-interactive:focus-visible,
.mah-pill.mah-focusable:focus-visible {
  outline: none;
  box-shadow: var(--mah-ring);
}

/* 8. States — skeleton / empty / error (graceful by default) */
.mah-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--mah-radius-sm);
  background: color-mix(in srgb, var(--mah-ink-3) 12%, transparent);
  min-height: 0.9rem;
}
.mah-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mah-ink-2) 16%, transparent),
    transparent
  );
  animation: mah-shimmer 1.3s ease-in-out infinite;
}
@keyframes mah-shimmer {
  100% { transform: translateX(100%); }
}

.mah-empty,
.mah-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mah-space-2);
  padding: var(--mah-space-6) var(--mah-space-4);
  text-align: center;
  border: 1px dashed var(--mah-line-strong);
  border-radius: var(--mah-radius);
  color: var(--mah-ink-2);
  background: var(--mah-bg-2);
}
.mah-error {
  border-color: color-mix(in srgb, var(--mah-danger) 40%, transparent);
  color: var(--mah-danger);
}

/* 9. Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  .mah-card,
  .mah-btn,
  .mah-card.mah-interactive {
    transition:
      border-color var(--mah-dur) var(--mah-ease),
      background var(--mah-dur) var(--mah-ease) !important;
  }
  .mah-card.mah-interactive:hover,
  .mah-btn:active {
    transform: none !important;
  }
  .mah-skeleton::after {
    animation: none !important;
  }
}