/* ============================================================
   NEXTGEN ALYGN - COMPONENT STYLES
   Class-based styles for the React components (prefix .ngx-).
   Shipped via styles.css so consumers get hover/focus states.
   All values reference design tokens.
   ============================================================ */

/* ---------------------------------------------------------------
   BUTTON
   --------------------------------------------------------------- */
.ngx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration) var(--ease-standard),
              color var(--duration) var(--ease-standard),
              border-color var(--duration) var(--ease-standard),
              box-shadow var(--duration) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.ngx-btn:active { transform: scale(0.98); }
.ngx-btn:disabled,
.ngx-btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }

.ngx-btn--sm { font-size: 12px; padding: 9px 18px; min-height: 36px; }
.ngx-btn--md { font-size: 13px; padding: 13px 26px; min-height: 44px; }
.ngx-btn--lg { font-size: 15px; padding: 17px 36px; min-height: 52px; }
.ngx-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ng-dark .ngx-btn:focus-visible { outline-color: var(--accent-text-dark); }

.ngx-btn--primary {
  background: var(--accent-action);
  color: var(--text-on-accent);
  border-color: var(--accent-action);
}
.ngx-btn--primary:hover { background: var(--accent-action-hover); border-color: var(--accent-action-hover); }
.ngx-btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.ngx-btn--outline:hover { border-color: var(--text-accent); color: var(--text-accent); }
.ngx-btn--ghost { background: transparent; color: var(--text-primary); }
.ngx-btn--ghost:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-accent); }
.ngx-btn--full { width: 100%; }

/* On dark surfaces, primary button uses brand lavender (contrast passes on
   obsidian) with a glow on hover. */
.ng-dark .ngx-btn--primary { background: var(--accent); border-color: var(--accent); }
.ng-dark .ngx-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--glow-sm); }

.ngx-btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------------
   EYEBROW
   --------------------------------------------------------------- */
.ngx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
  line-height: 1;
}
.ngx-eyebrow--muted { color: var(--text-muted); }
.ngx-eyebrow--inherit { color: inherit; }
.ngx-eyebrow__dash { width: 24px; height: 2px; background: currentColor; flex: none; }

/* ---------------------------------------------------------------
   ICON  (Lucide inlined as SVG - recolorable with currentColor)
   --------------------------------------------------------------- */
.ngx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex: none;
  vertical-align: middle;
}
.ngx-icon svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------
   LOGO
   --------------------------------------------------------------- */
.ngx-logo { display: inline-flex; align-items: center; gap: 14px; }
.ngx-logo--stacked { flex-direction: column; gap: 12px; }
.ngx-logo__mark { display: block; width: auto; }
.ngx-logo__wm { display: block; width: auto; }
.ngx-logo__tagline {
  font-family: var(--font-logo);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
  line-height: 1;
}

/* ---------------------------------------------------------------
   CARD
   --------------------------------------------------------------- */
.ngx-card {
  position: relative;
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--hairline);
  overflow: hidden;
}
.ngx-card--flat { box-shadow: none; }
.ngx-card--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.ngx-card--elevated { box-shadow: var(--shadow-md); border-radius: var(--radius-md); }
.ngx-card--pad-lg { padding: var(--space-10); }
.ngx-card--pad-none { padding: 0; }

.ngx-card--obsidian {
  background: var(--ng-obsidian);
  box-shadow: none;
  color: #fff;
}
.ngx-card--gradient {
  background: var(--grad-obsidian);
  box-shadow: none;
  color: #fff;
}
.ngx-card--lavender {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}

.ngx-card__watermark {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 42%;
  max-width: 220px;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------
   TAG
   --------------------------------------------------------------- */
.ngx-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent-subtle);
  color: var(--accent);
}
.ngx-tag--solid { background: var(--accent); color: #fff; }
.ngx-tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); }
.ngx-tag--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.ngx-tag--hash { background: transparent; padding: 0; font-weight: var(--weight-bold); color: var(--accent); }

/* ---------------------------------------------------------------
   BADGE
   --------------------------------------------------------------- */
.ngx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-accent-subtle);
  color: var(--accent);
  line-height: 1;
}
.ngx-badge--solid { background: var(--accent); color: #fff; }
.ngx-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.ngx-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ngx-badge--step {
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-accent);
  color: var(--accent);
  font-size: 11px; letter-spacing: 0;
}

/* ---------------------------------------------------------------
   STAT BLOCK
   --------------------------------------------------------------- */
.ngx-stat { display: flex; flex-direction: column; gap: 8px; }
.ngx-stat--center { align-items: center; text-align: center; }
.ngx-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-display-md);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ngx-stat--accent .ngx-stat__value { color: var(--accent); }
.ngx-stat__label {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   FEATURE ITEM
   --------------------------------------------------------------- */
.ngx-feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.ngx-feature--stack { flex-direction: column; gap: var(--space-3); }
.ngx-feature__icon { color: var(--accent); flex: none; }
.ngx-feature__title {
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ngx-feature__desc {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   QUOTE
   --------------------------------------------------------------- */
.ngx-quote { position: relative; }
.ngx-quote__mark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 68px;
  line-height: 0.7;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.ngx-quote__text {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ngx-quote__cite {
  margin-top: var(--space-4);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}