/* Rabbit Hole Digital — component library.
   Ported 1:1 from the design-system bundle (React inline styles -> token-driven CSS).
   Every value traces to a token. Works in both :root (light) and .rh-dark scopes. */

/* ---------- Button ---------- */
.rh-btn{
  font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight);
  letter-spacing:.12em; text-transform:uppercase; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:.75rem 1.25rem; border-radius:var(--radius-button); border:1px solid transparent;
  cursor:pointer; -webkit-font-smoothing:antialiased; text-decoration:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rh-btn--sm{ font-size:.6875rem; padding:.5rem .875rem; }
.rh-btn--solid{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.rh-btn--solid:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent)!important; }
.rh-btn--ghost-light{ background:transparent; color:var(--text); border-color:var(--hairline-strong); }
.rh-btn--ghost-light:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-active)!important; }
.rh-btn--ghost-dark{ background:transparent; color:var(--text); border-color:var(--hairline-strong); }
.rh-btn--ghost-dark:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--text)!important; }
.rh-btn[disabled],.rh-btn--disabled{ opacity:.4; cursor:not-allowed; }
.rh-btn--block{ width:100%; }

/* ---------- Tag ---------- */
.rh-tag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight);
  letter-spacing:.1em; text-transform:uppercase; line-height:1;
  padding:.4375rem .75rem; border-radius:var(--radius-pill); border:1px solid transparent;
}
.rh-tag--default{ background:var(--surface); color:var(--text); border-color:var(--hairline-strong); }
.rh-tag--accent{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.rh-tag--outline{ background:transparent; color:var(--text-muted); border-color:var(--hairline-strong); }

/* ---------- Eyebrow ---------- */
.rh-eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight);
  letter-spacing:var(--mono-ls); text-transform:uppercase; color:var(--text-muted); line-height:1;
}
.rh-eyebrow::before{ content:""; width:6px; height:6px; border-radius:var(--radius-pill); background:var(--accent); flex:0 0 auto; }
.rh-eyebrow--nodot::before{ display:none; }

/* ---------- SectionMarker ---------- */
.rh-marker{ display:flex; align-items:baseline; gap:var(--space-3); }
.rh-marker__n{ font-family:var(--font-mono); font-size:1rem; font-weight:var(--weight-semibold); letter-spacing:.04em; color:var(--accent); line-height:1; }
.rh-marker__label{ font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight); letter-spacing:var(--mono-ls); text-transform:uppercase; color:var(--text-muted); line-height:1; }

/* ---------- Card ---------- */
.rh-card{
  background:var(--card-bg); border:1px solid var(--hairline); border-radius:var(--radius-card);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rh-card--interactive{ cursor:pointer; }
.rh-card--interactive:hover{ box-shadow:var(--shadow-sm); border-color:var(--hairline-strong); }
.rh-card__eyebrow{ font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight); letter-spacing:var(--mono-ls); text-transform:uppercase; color:var(--accent); line-height:1; }
.rh-card__title{ font-family:var(--font-display); font-size:var(--h3-size); font-weight:var(--h3-weight); line-height:var(--h3-lh); letter-spacing:var(--h3-ls); color:var(--text); margin:0; }
.rh-card__body{ font-family:var(--font-body); font-size:var(--body-size); line-height:var(--body-lh); color:var(--text-muted); }
.rh-card__footer{ margin-top:var(--space-2); }

/* ---------- PullQuote ---------- */
.rh-pullquote{ margin:0; display:flex; gap:var(--space-5); }
.rh-pullquote__rule{ width:2px; background:var(--accent); flex:0 0 auto; border-radius:2px; }
.rh-pullquote__q{ margin:0; font-family:var(--font-display); font-weight:var(--quote-weight); font-size:var(--quote-size); line-height:var(--quote-lh); letter-spacing:var(--quote-ls); color:var(--text); text-wrap:balance; }
.rh-pullquote__cite{ margin-top:var(--space-4); font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight); letter-spacing:var(--mono-ls); text-transform:uppercase; color:var(--text-muted); }

/* ---------- FeatureItem ---------- */
.rh-feature{ display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-5); border-top:1px solid var(--hairline); }
.rh-feature__n{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; color:var(--accent); }
.rh-feature__title{ font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--h3-size); line-height:var(--h3-lh); letter-spacing:var(--h3-ls); color:var(--text-hi); margin:0; }
.rh-feature__body{ font-family:var(--font-body); font-size:var(--body-size); line-height:var(--body-lh); color:var(--text-muted); margin:0; }

/* ---------- StatBar ---------- */
.rh-statbar{ display:flex; flex-direction:column; gap:var(--space-2); }
.rh-statbar__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); }
.rh-statbar__label{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.rh-statbar__value{ font-family:var(--font-mono); font-size:var(--mono-size); color:var(--accent); }
.rh-statbar__track{ position:relative; height:8px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:2px; overflow:hidden; }
.rh-statbar__fill{ position:absolute; inset:0 auto 0 0; background:var(--accent); transition:width var(--dur) var(--ease); }
.rh-statbar--muted .rh-statbar__value{ color:var(--text-faint); }
.rh-statbar--muted .rh-statbar__fill{ background:var(--ink-600); }

/* ---------- Terminal ---------- */
.rh-terminal{ background:var(--ink-900); border:1px solid var(--hairline-strong); border-radius:var(--radius-card); overflow:hidden; font-family:var(--font-mono); }
.rh-terminal__bar{ display:flex; align-items:center; gap:var(--space-2); padding:.5rem .75rem; border-bottom:1px solid var(--hairline); background:var(--ink-850); }
.rh-terminal__dot{ width:8px; height:8px; border-radius:999px; background:var(--ink-600); }
.rh-terminal__dot--accent{ background:var(--accent); }
.rh-terminal__title{ margin-left:auto; font-size:.6875rem; letter-spacing:.06em; color:var(--text-faint); }
.rh-terminal__body{ padding:var(--space-4); display:flex; flex-direction:column; gap:.375rem; font-size:.8125rem; line-height:1.5; }
.rh-terminal__line{ white-space:pre-wrap; color:var(--text-muted); }
.rh-terminal__line--out{ color:var(--text-muted); }
.rh-terminal__line--ok{ color:var(--ok); }
.rh-terminal__line--cmd{ color:var(--accent); }
.rh-terminal__line--dim{ color:var(--text-faint); }
.rh-terminal__line--cmd::before{ content:"\03BB "; color:var(--text-faint); }

/* ---------- Marquee ---------- */
.rh-marquee{ overflow:hidden; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:.75rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rh-marquee__track{ display:inline-flex; align-items:center; white-space:nowrap; animation:rh-marquee var(--marquee-speed,30s) linear infinite; }
.rh-marquee__item{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.rh-marquee__sep{ width:4px; height:4px; border-radius:999px; background:var(--accent); margin:0 var(--space-5); flex:0 0 auto; display:inline-block; }

/* ---------- Form fields ---------- */
.rh-label{ display:block; font-family:var(--font-mono); font-size:var(--mono-size); font-weight:var(--mono-weight); letter-spacing:var(--mono-ls); text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-2); }
.rh-input,.rh-textarea,.rh-select{
  width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:var(--body-size); line-height:1.5;
  color:var(--text); background:var(--bg); border:1px solid var(--hairline-strong); border-radius:var(--radius-button);
  padding:.625rem .75rem; outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rh-input:focus,.rh-textarea:focus,.rh-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.rh-textarea{ resize:vertical; min-height:96px; }
.rh-select{ appearance:none; -webkit-appearance:none; padding-right:2rem; }
.rh-field{ position:relative; }
.rh-field--select{ position:relative; }
.rh-field--select::after{ content:"\25BE"; position:absolute; right:.75rem; top:calc(50% + .7rem); transform:translateY(-50%); pointer-events:none; font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); }
.rh-field__msg{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; margin-top:var(--space-2); color:var(--text-faint); }