/* =================================================================
   OpenedMic™ — Component Primitives
   -----------------------------------------------------------------
   Eight primitives (Button, Card, Input, Badge, Toast, Modal, Nav,
   Status). All prefixed .om-* to avoid colliding with any existing
   inline-styled classes on current public pages. Use alongside the
   existing .nav-cta / .btn-cta / etc. during transition; later
   packets progressively migrate.
   ----------------------------------------------------------------- */

/* ── TYPOGRAPHY — display + heading classes ──────────────── */
.om-display {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-display);
  line-height: var(--om-leading-display);
  letter-spacing: var(--om-tracking-display);
  font-weight: var(--om-weight-bold);
  color: var(--om-text-primary);
  margin: 0;
}

.om-h1 {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-h1);
  line-height: var(--om-leading-heading);
  letter-spacing: var(--om-tracking-tight);
  font-weight: var(--om-weight-bold);
  color: var(--om-text-primary);
  margin: 0;
}

.om-h2 {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-h2);
  line-height: var(--om-leading-heading);
  letter-spacing: var(--om-tracking-tight);
  font-weight: var(--om-weight-semibold);
  color: var(--om-text-primary);
  margin: 0;
}

.om-h3 {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-h3);
  line-height: var(--om-leading-heading);
  font-weight: var(--om-weight-semibold);
  color: var(--om-text-primary);
  margin: 0;
}

.om-eyebrow {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-caption);
  font-weight: var(--om-weight-bold);
  letter-spacing: var(--om-tracking-caps);
  text-transform: uppercase;
  color: var(--om-text-tertiary);
  margin: 0;
}

.om-body {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body);
  line-height: var(--om-leading-body);
  color: var(--om-text-primary);
  margin: 0;
}

.om-body--lg {
  font-size: var(--om-type-body-lg);
}

.om-body--secondary {
  color: var(--om-text-secondary);
}

.om-caption {
  font-size: var(--om-type-caption);
  color: var(--om-text-tertiary);
  line-height: var(--om-leading-dense);
}

.om-micro {
  font-size: var(--om-type-micro);
  color: var(--om-text-tertiary);
  line-height: var(--om-leading-dense);
}

/* ── BUTTON primitive ────────────────────────────────────── */
.om-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--om-space-2);
  padding-block: var(--om-space-3);
  padding-inline: var(--om-space-5);
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--om-radius-md);
  font-family: var(--om-font-sans);
  font-size: var(--om-type-sub);
  font-weight: var(--om-weight-bold);
  letter-spacing: var(--om-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--om-duration-short) var(--om-ease-standard),
    color      var(--om-duration-short) var(--om-ease-standard),
    border     var(--om-duration-short) var(--om-ease-standard),
    transform  var(--om-duration-short) var(--om-ease-standard);
  white-space: nowrap;
}

.om-btn:disabled,
.om-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button variants */
.om-btn--primary {
  background: var(--om-brand-red-cta);
  color: #ffffff;
}

.om-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

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

.om-btn--secondary:hover:not(:disabled) {
  background: var(--om-surface-2);
  border-color: var(--om-border-strong);
}

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

.om-btn--ghost:hover:not(:disabled) {
  color: var(--om-text-primary);
  background: var(--om-surface-2);
}

/* Button sizes */
.om-btn--sm { height: 32px; padding-block: var(--om-space-2); padding-inline: var(--om-space-4); font-size: var(--om-type-caption); }
.om-btn--lg { height: 48px; padding-block: var(--om-space-4); padding-inline: var(--om-space-6); font-size: var(--om-type-body); }

/* ── CARD primitive ──────────────────────────────────────── */
.om-card {
  background: var(--om-surface-2);
  border: 1px solid var(--om-border-subtle);
  border-radius: var(--om-radius-lg);
  padding: var(--om-space-6);
  color: var(--om-text-primary);
}

.om-card--elevated {
  background: var(--om-surface-3);
  box-shadow: var(--om-shadow-2);
}

.om-card--interactive {
  cursor: pointer;
  transition:
    border-color var(--om-duration-short) var(--om-ease-standard),
    transform    var(--om-duration-short) var(--om-ease-standard);
}

.om-card--interactive:hover {
  border-color: var(--om-border-strong);
}

/* ── INPUT primitive ────────────────────────────────────── */
.om-input {
  display: block;
  width: 100%;
  height: 44px;
  padding-block: var(--om-space-2);
  padding-inline: var(--om-space-4);
  background: var(--om-surface-2);
  color: var(--om-text-primary);
  border: 1px solid var(--om-border-default);
  border-radius: var(--om-radius-md);
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body);
  line-height: var(--om-leading-dense);
  transition: border-color var(--om-duration-short) var(--om-ease-standard);
}

.om-input:focus {
  outline: none;
  border-color: var(--om-brand-red);
}

.om-input::placeholder {
  color: var(--om-text-tertiary);
}

.om-input--code {
  font-family: var(--om-font-mono);
  font-size: var(--om-type-mono-code);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* ── BADGE / CHIP primitive ─────────────────────────────── */
.om-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--om-space-1);
  padding-block: 2px;
  padding-inline: var(--om-space-2);
  border-radius: var(--om-radius-pill);
  font-family: var(--om-font-sans);
  font-size: var(--om-type-caption);
  font-weight: var(--om-weight-semibold);
  letter-spacing: var(--om-tracking-wide);
  background: var(--om-surface-3);
  color: var(--om-text-secondary);
}

.om-badge--live    { background: rgba(255, 61, 61, 0.14); color: var(--om-signal-live); }
.om-badge--ok      { background: rgba(0, 217, 126, 0.14); color: var(--om-signal-ok); }
.om-badge--warn    { background: rgba(255, 176, 32, 0.14); color: var(--om-signal-warn); }
.om-badge--error   { background: rgba(255, 92, 92, 0.14); color: var(--om-signal-error); }
.om-badge--info    { background: rgba(64, 200, 255, 0.14); color: var(--om-signal-info); }

/* ── STATUS DOT primitive ──────────────────────────────── */
.om-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--om-text-tertiary);
  flex-shrink: 0;
}

.om-dot--live    { background: var(--om-signal-live); }
.om-dot--ok      { background: var(--om-signal-ok); }
.om-dot--warn    { background: var(--om-signal-warn); }
.om-dot--error   { background: var(--om-signal-error); }
.om-dot--info    { background: var(--om-signal-info); }

/* Live dot with pulse — reduced-motion fallback is a static dot. */
.om-dot--pulse {
  position: relative;
  background: var(--om-signal-live);
}

.om-dot--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--om-signal-live);
  animation: om-dot-pulse 2000ms var(--om-ease-standard) infinite;
  opacity: 0.4;
}

@keyframes om-dot-pulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .om-dot--pulse::after { animation: none; opacity: 0; }
}

/* ── TOAST primitive ────────────────────────────────────── */
.om-toast {
  display: flex;
  align-items: center;
  gap: var(--om-space-3);
  padding: var(--om-space-3) var(--om-space-5);
  background: var(--om-surface-3);
  color: var(--om-text-primary);
  border: 1px solid var(--om-border-default);
  border-radius: var(--om-radius-md);
  box-shadow: var(--om-shadow-2);
  font-size: var(--om-type-sub);
  max-width: 420px;
}

.om-toast--info    { border-color: var(--om-signal-info); }
.om-toast--ok      { border-color: var(--om-signal-ok); }
.om-toast--warn    { border-color: var(--om-signal-warn); }
.om-toast--error   { border-color: var(--om-signal-error); }

/* ── MODAL primitive ───────────────────────────────────── */
.om-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 8, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--om-z-modal);
}

.om-modal {
  background: var(--om-surface-3);
  border: 1px solid var(--om-border-default);
  border-radius: var(--om-radius-lg);
  box-shadow: var(--om-shadow-3);
  padding: var(--om-space-6);
  max-width: 520px;
  width: calc(100% - var(--om-space-8));
  max-height: calc(100vh - var(--om-space-16));
  overflow: auto;
}

/* ── NAV primitive (public-site shell) ─────────────────── */
.om-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--om-space-4);
  padding: var(--om-space-4) var(--om-space-6);
  background: var(--om-surface-1);
  border-bottom: 1px solid var(--om-border-subtle);
}

.om-nav__links {
  display: flex;
  align-items: center;
  gap: var(--om-space-5);
}

.om-nav__link {
  color: var(--om-text-secondary);
  text-decoration: none;
  font-size: var(--om-type-sub);
  font-weight: var(--om-weight-medium);
  transition: color var(--om-duration-short) var(--om-ease-standard);
}

.om-nav__link:hover {
  color: var(--om-text-primary);
  text-decoration: none;
}

.om-nav__link--active {
  color: var(--om-text-primary);
}

@media (max-width: 700px) {
  .om-nav__links { display: none; }
}

/* ── ARTICLE container (editorial reading column) ─────── */
.om-article {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--om-space-12);
  padding-inline: var(--om-space-6);
}

.om-article h1,
.om-article .om-h1 {
  margin-block-end: var(--om-space-6);
}

.om-article h2,
.om-article .om-h2 {
  margin-block-start: var(--om-space-10);
  margin-block-end: var(--om-space-4);
  padding-block-end: var(--om-space-2);
  border-block-end: 1px solid var(--om-border-subtle);
}

.om-article h3,
.om-article .om-h3 {
  margin-block-start: var(--om-space-6);
  margin-block-end: var(--om-space-3);
}

.om-article p,
.om-article ul,
.om-article ol {
  margin-block-end: var(--om-space-4);
  font-size: var(--om-type-body-lg);
  line-height: var(--om-leading-body);
  color: var(--om-text-primary);
}

/* ── RTL-aware directional helpers ─────────────────────── */
html[dir='rtl'] .om-icon--directional {
  transform: scaleX(-1);
}

/* ── SECTION rhythm helpers ───────────────────────────── */
.om-section {
  padding-block: var(--om-space-16);
  padding-inline: var(--om-space-6);
}

.om-section--hero {
  padding-block: var(--om-space-24);
}

.om-section--compact {
  padding-block: var(--om-space-12);
}

.om-container {
  max-width: 1200px;
  margin-inline: auto;
}

.om-container--narrow {
  max-width: 720px;
}

.om-container--wide {
  max-width: 1440px;
}