/* ============================================================
   SCIGENIX · Base element styles + small utilities
   Applied when a page/app opts into the system. Dark-first.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--accent-soft-bd); color: var(--text-primary); }

/* ---- Brand utilities ---- */

/* Eyebrow / kicker label — uppercase, wide tracking, accent */
.sx-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* The green star is a recurring brand mark */
.sx-star { color: var(--accent); font-weight: var(--fw-bold); }

/* Headline rule used across brand sheets: thin line under a title */
.sx-rule {
  border: 0;
  border-top: var(--border-hairline) solid var(--border-default);
  margin: var(--space-4) 0;
}

.sx-display { font-family: var(--font-display); font-weight: var(--fw-semibold); }

.sx-mono { font-family: var(--font-mono); }

/* The signature green underline accent (links in nav, year stamps) */
.sx-underline-accent {
  display: inline-block;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ---- Keyframes used by interactive components ---- */

/* Status-dot pulse — used while a state is live/running/syncing */
@keyframes sx-pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* Quick fade + lift entrance (backdrops, cards) */
@keyframes sx-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-over panel entrance from the right edge */
@keyframes sx-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-mono, [style*="sx-pulse-dot"] { animation: none !important; }
}