/* ============================================================
   HYPATIUS — Base reset + global element styles + brand utilities
   The reusable CSS-class layer that ships with the design system.
   Authored against the token files. Consumers get this via styles.css.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ---------- TYPOGRAPHY ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
}
.display--invert { color: var(--ink-pure); }
.display--md { font-size: var(--display-2); }

h1, .h1 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--h1);
  line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--text-heading);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--h2);
  line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text-heading);
}
h3, .h3 {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--h3);
  line-height: 1.3; color: var(--text-heading);
}

.eyebrow {
  font-family: var(--font-mono); font-size: var(--eyebrow); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-link); display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--cobalt-500); display: inline-block; }
.eyebrow--invert { color: var(--accent-signal); }
.eyebrow--invert::before { background: var(--accent-signal); }

.lede { font-size: var(--body-lg); color: var(--text-body); line-height: var(--lh-body); max-width: 56ch; }
.lede--invert { color: var(--text-bright); }

.mono { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; }

/* ---------- LAYOUT ---------- */
.container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--dark { background: var(--navy-900); color: var(--slate-300); }
.section--navy { background: var(--navy-800); color: var(--slate-300); }

/* Comm-beam motif — thin cobalt line + aqua signal dot */
.beam { display: flex; align-items: center; gap: 0.5rem; margin-block: 1.5rem; }
.beam::before { content: ""; width: 2.5rem; height: 1px; background: var(--cobalt-500); }
.beam::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-signal); }
.beam--invert::before { background: var(--accent-signal); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.75rem; font-family: var(--font-body); font-size: 0.9rem;
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-button);
  border-radius: var(--radius); border: 1px solid transparent;
  transition: all var(--dur-fast) ease; cursor: pointer; position: relative;
}
.btn__arrow { font-size: 1.1em; transition: transform var(--dur-fast); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--cobalt-500); color: #fff; border-color: var(--cobalt-400); }
.btn--primary:hover { background: var(--cobalt-600); border-color: var(--cobalt-600); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--ghost:hover { border-color: var(--accent-signal); color: var(--accent-signal); }
.btn--accent { background: var(--aqua-400); color: var(--navy-900); border-color: var(--aqua-400); }
.btn--accent:hover { background: var(--aqua-300); border-color: var(--aqua-300); }
.btn--text { padding: 0.5rem 0; background: transparent; color: var(--accent-link); border: none; border-bottom: 1px solid var(--cobalt-500); border-radius: 0; }
.btn--text:hover { color: var(--accent-signal); }

/* ---------- CARDS ---------- */
.cap-card {
  padding: 2rem; background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius); position: relative; transition: all var(--dur) ease;
}
.cap-card:hover { border-color: var(--cobalt-400); transform: translateY(-2px); }
.cap-card__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-link); letter-spacing: 0.18em; margin-bottom: 0.75rem; }
.cap-card__title { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.75rem; color: var(--text-heading); }
.cap-card__desc { color: var(--text-body); line-height: var(--lh-body); }

/* ---------- STATUS BADGE ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
  background: rgba(79, 195, 217, 0.1); border: 1px solid rgba(79, 195, 217, 0.3);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-signal);
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-signal); box-shadow: var(--shadow-glow-aqua); }
.status-badge--gold { background: rgba(201, 169, 97, 0.1); border-color: rgba(201, 169, 97, 0.3); color: var(--gold-500); }
.status-badge--gold::before { background: var(--gold-500); box-shadow: 0 0 6px var(--gold-500); }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal--visible { opacity: 1; transform: translateY(0); }

/* ---------- UTILITIES ---------- */
.center-text { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.text-aqua { color: var(--accent-signal); }