/* ============================================================================
   NOX — Global stylesheet
   Imports the token layer, then sets base element + semantic styles.
   This is the file the design-system compiler reads for tokens & fonts.
   ========================================================================== */

@import url('./colors_and_type.css');

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--t-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Semantic type ranks ------------------------------------------------ */
h1, .nox-h1 { font: var(--t-h1); letter-spacing: var(--track-tight); margin: 0; color: var(--ink); }
h2, .nox-h2 { font: var(--t-h2); letter-spacing: var(--track-tight); margin: 0; color: var(--ink); }
h3, .nox-h3 { font: var(--t-h3); letter-spacing: var(--track-snug);  margin: 0; color: var(--ink); }
h4, .nox-h4 { font: var(--t-h4); letter-spacing: var(--track-snug);  margin: 0; color: var(--ink); }

.nox-display-1 { font: var(--t-display-1); letter-spacing: var(--track-tight); margin: 0; }
.nox-display-2 { font: var(--t-display-2); letter-spacing: var(--track-tight); margin: 0; }

p { margin: 0 0 1em; color: var(--ink-2); text-wrap: pretty; }

a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-press); }

code, kbd, samp, .nox-mono { font: var(--t-mono); }

/* ---- Signature: the two-tone split headline ----------------------------
   Lead clause in charcoal ink, trailing clause in the slate sub-tone.
   <h1 class="nox-split">Ecosystem partners <span>act as risk oracles</span></h1>
   ------------------------------------------------------------------------ */
.nox-split { color: var(--ink); }
.nox-split > span,
.nox-muted { color: var(--ink-4); }

/* ---- Eyebrow / label --------------------------------------------------- */
.nox-eyebrow {
  font: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-3);
}

/* ---- Surfaces ---------------------------------------------------------- */
.nox-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.nox-panel {
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* ---- Focus ------------------------------------------------------------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

/* ---- Hairline divider -------------------------------------------------- */
.nox-divider { height: 1px; background: var(--line); border: 0; }