/* =========================================================================
   Otherix — site.css
   Dark-only marketing styles. Most visual styling lives inline in the
   partials (a faithful lift from the design); this file holds what inline
   styles cannot express: @font-face, resets, keyframes, and :hover states.
   ========================================================================= */

/* ---- Self-hosted IBM Plex (run static/fonts/fetch-fonts.sh once) -------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); }

/* ---- Design tokens (for reference / reuse) ------------------------------ */
:root {
  --ox-canvas:    #1e2327;
  --ox-alt:       #1b1f23;
  --ox-surface-1: #262c31;
  --ox-surface-2: #2e353b;
  --ox-term:      #16191c;
  --ox-hair:      rgba(180,190,196,0.10);
  --ox-hair-soft: rgba(180,190,196,0.07);
  --ox-ink:       #eef1f2;
  --ox-ink-2:     #cdd5da;
  --ox-muted:     #9aa4ab;
  --ox-subtle:    #5f6b72;
  --ox-accent:    #58ccc2;
  /* brand-mark palette: pink = VM, cyan = VXLAN, purple = WireGuard */
  --ox-pink:      #ff6bb0;
  --ox-cyan:      #22d3ee;
  --ox-purple:    #8b5cf6;
  --ox-green:     #82d99a;
  --ox-amber:     #e3c178;
}

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #1e2327;
  color: #eef1f2;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
::selection { background: rgba(88,204,194,0.28); color: #eef1f2; }

@keyframes ox-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes ox-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Shared layout helpers --------------------------------------------- */
.ox-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.ox-section { padding: 96px 0; border-top: 1px solid rgba(180,190,196,0.07); }
.ox-section--alt { background: #1b1f23; }
.ox-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #58ccc2; }
.ox-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -1.2px; color: #eef1f2; margin: 0; }

/* ---- Interactive components (need :hover, so they live here) ------------ */
.ox-navlink { font-size: 14px; color: #9aa4ab; text-decoration: none; }
.ox-navlink:hover { color: #eef1f2; }

.ox-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.ox-btn-primary { background: #eef1f2; color: #1a1f23; border: none; }
.ox-btn-primary:hover { background: #ffffff; }
.ox-btn-ghost { background: #2e353b; color: #eef1f2; border: 1px solid rgba(180,190,196,0.2); }
.ox-btn-ghost:hover { border-color: rgba(88,204,194,0.5); }

.ox-card { background: #262c31; border: 1px solid rgba(180,190,196,0.1); border-radius: 12px; padding: 26px; transition: border-color .15s ease; }
.ox-card:hover { border-color: rgba(88,204,194,0.4); }

.ox-copybtn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #9aa4ab; background: #262c31; border: 1px solid rgba(180,190,196,0.16); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ox-copybtn:hover { color: #eef1f2; border-color: rgba(88,204,194,0.5); }

.ox-doclink { color: #58ccc2; text-decoration: none; }
.ox-doclink:hover { text-decoration: underline; }