/* LynxApi redesign — shared design tokens.
   Values lifted from the live fork's own hero CSS (web/src/features/home/lynx/lynx-hero.css),
   so all 10 concepts stay on-brand instead of inventing a new palette.

   HOST CONTEXT (why the offsets below are what they are):
   these heroes are designed to be embedded via new-api's HomePageContent=URL
   iframe branch, where PublicHeader renders its own fixed pill at y=20..76
   (pt-5 + h-14, z-50). So: the hero ships NO nav of its own, and its top
   corner stamps start at 96px to clear the host pill instead of colliding
   with it. See heroes/build.mjs and the redesign README. */

/* Fonts: the brand ships 5 distinct woff2 files, not 7 — space-grotesk-500 and
   -700 are byte-identical, as are jetbrains-mono-400 and -600 (verified by md5,
   true in the source project as well). Declaring a weight RANGE per family uses
   the one real file and lets the browser synthesise the bolder end, instead of
   claiming a 700 that would silently serve 500 data. */
@font-face { font-family: 'Space Grotesk'; src: url('./fonts/space-grotesk.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/plus-jakarta-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/plus-jakarta-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/plus-jakarta-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* brand palette — from the live site */
  --ink: #171614;
  --amber: #f0a028;
  --bone: #f4f2ee;
  --bone-alt: #f2efe9;
  --muted: #6f6a60;
  --line: #c9c3b8;
  --white: #fff;

  /* dark set — for the reference-site direction */
  --void: #0b0c0e;
  --void-2: #121417;
  --smoke: #1b1e22;
  --fog: #8e959d;
  --fog-dim: #5c636b;

  /* type */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: Georgia, 'Times New Roman', 'Songti SC', serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* the band the host's fixed nav pill occupies */
  --host-nav-bottom: 96px;
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--body);
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* micro-type: the reference site's signature — small, uppercase, wide-tracked mono */
.micro {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1.5;
}
.micro-lg { font-size: 12px; letter-spacing: 0.32em; }

/* corner stamp: V-001 / LYNX API — the reference site keeps identity in the corners.
   Top stamps clear the host nav pill; bottom ones sit above the fold edge. */
.corner { position: absolute; z-index: 20; }
.corner--tl { top: var(--host-nav-bottom); left: 34px; }
.corner--tr { top: var(--host-nav-bottom); right: 34px; text-align: right; }
.corner--bl { bottom: 26px; left: 34px; }
.corner--br { bottom: 26px; right: 34px; text-align: right; }

/* Belt and braces: the host owns navigation. If a hero ever re-introduces its
   own bar it would land a second pill under the host's — so it is suppressed
   here rather than left to depend on every concept remembering not to. */
nav.top { display: none !important; }

.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup svg { width: 26px; height: 26px; display: block; }

/* The host pushes {themeMode, lang} into the iframe on load and on change
   (PublicLayout's syncIframePreferences). A hero that ignores the message would
   stay dark while the host is light, so the envelope is honoured here: the
   concepts that support a light mode switch to it. */
html[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}