/*
  Lexiome marketing site, Signal (R2) design system.
  Spec: docs/planning/product/design.md ("Status" / system spec at the top),
  ADR-0013 (docs/decisions/0013-signal-design-system.md). Supersedes redo-A
  "Bold Dev-Tool" (dark navy hero, teal tonal ramp, IBM Plex) outright.

  Base: white / ink / hairline / body grey, monochrome-first. ONE accent,
  signal amber #D9480F, reserved for cited spans, the scope-section bar,
  and link chevrons. CTAs are always black (#111 fill, white text), never
  amber. This restraint is the signature of the system; do not soften it.

  Fonts self-hosted under apps/marketing/fonts/ (same-origin, no CSP change
  needed, default-src 'self' already covers font-src). No Google Fonts CDN
  (the design-ref-signal.html preview uses it; that's a scratchpad reference
  only, never shipped). No base64, no external requests.
*/

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold-Latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-ExtraBold-Latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-Regular-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-SemiBold-Latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium-Latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Base palette, monochrome. */
  --white: #fff;
  --ink: #111;
  --hairline: #ededed;
  --grey: #525252;
  --surface: #fafafa;

  /* The one accent. Reserved for: cited spans, scope-section bar, link
     chevrons. Never a CTA, never decoration. */
  --amber: #d9480f;

  /* Amber-on-dark, for cited fields inside the dark JSON response panel.
     Recomputed contrast: 8.18:1 on --panel-bg, clear AA. */
  --cite-dark-bg: #3a1e08;
  --cite-dark-text: #f0902f;

  /* Note: amber TEXT on white measures 4.30:1 (fails AA 4.5:1 for normal
     text). This build's only citation UI is inside the dark panel above
     (8.18:1, passes), so no light-surface citation color is declared here.
     If a future page needs one, keep amber out of the text color; use it
     only as a background tint or underline (non-text, 3:1 threshold). */

  /* Dark JSON response panel, the signature visual. */
  --panel-bg: #0b0b0c;
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-text: #c9d4e0;
  --panel-key: #9aa8b5;
  --panel-string: #d4d4d4;
  --panel-muted: #8a8a8a;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;

  /* 8px base spacing scale, every margin/padding/gap uses one of these. */
  --sp-1: 0.5rem; /* 8px */
  --sp-2: 1rem; /* 16px */
  --sp-3: 1.5rem; /* 24px */
  --sp-4: 2rem; /* 32px */
  --sp-6: 3rem; /* 48px */
  --sp-8: 4rem; /* 64px */
  --sp-12: 6rem; /* 96px */

  --max-width: 1152px;
  --font-head: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--grey);
}

/* Visible keyboard focus everywhere (WCAG 2.4.7). Ink, not amber, amber
   is reserved for citation/scope-bar/chevron meaning only. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: -0.03em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

/* Tap target >=24px (WCAG 2.5.8). */
.nav-links a {
  color: var(--grey);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.25rem 0.1rem;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-cta {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.nav-cta:hover {
  background: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--sp-8) 0 var(--sp-6);
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-8);
  align-items: center;
}

/* Width capped once here; h1, sub and actions all inherit this one right
   edge instead of each having their own constraint (prevents the ragged
   left column edge from a prior build). */
.hero-copy {
  max-width: 34rem;
}

.hero-copy--wide {
  max-width: 40rem;
}

.hero-copy h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}

.hero-sub {
  color: var(--grey);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
  max-width: 42ch;
}

.hero-sub:last-of-type {
  margin-bottom: var(--sp-4);
}

.hero-sub code {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-xs);
  font-size: 0.9em;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background: #2b2b2b;
  color: #fff;
}

.btn-text {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-text:hover {
  color: var(--grey);
}

/* Chevron: decorative, non-text UI accent (WCAG 1.4.11 non-text 3:1
   applies, not 1.4.3's 4.5:1), amber's one permitted small-glyph use. */
.btn-text .chev {
  color: var(--amber);
}

/* ---------- Response panel (the signature visual) ---------- */

.response-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.7rem var(--sp-3);
  border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-mono);
}

.panel-filename {
  font-size: 0.78rem;
  color: var(--panel-muted);
}

.panel-status {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--cite-dark-text);
}

/* Real line breaks in the markup (never a single flattened line) PLUS a
   wrap rule, so a highlighted value can never force the panel wider than
   its grid column or trigger horizontal scroll on narrow viewports. */
.panel-json {
  margin: 0;
  padding: var(--sp-3);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--panel-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panel-json .jk {
  color: var(--panel-key);
}

.panel-json .jv {
  color: var(--panel-string);
}

/* The interactive citation target: a cited field value. Amber-on-dark,
   8.18:1, clears AA even at this small mono size. Focusable + hoverable;
   linked to its source span via matching data-cite. */
.cite-field {
  background: var(--cite-dark-bg);
  color: var(--cite-dark-text);
  border-radius: 3px;
  padding: 0 0.25rem;
  cursor: pointer;
}

.cite-field:hover,
.cite-field:focus-visible,
.cite-field.is-active {
  background: var(--cite-dark-text);
  color: var(--panel-bg);
  outline: none;
}

/* ---------- Source note (makes the citation link real) ---------- */

.source-note {
  border-top: 1px solid var(--panel-border);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.source-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--panel-muted);
  margin: 0 0 var(--sp-1);
}

.source-line {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--panel-text);
  margin: 0 0 0.3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-line:last-child {
  margin-bottom: 0;
}

/* Source-span highlight: keeps text at the base panel-text color
   (readable) and marks the match with the same amber-on-dark treatment as
   its JSON field, so hover/focus on either side lights up both. */
.source-line mark {
  background: var(--cite-dark-bg);
  color: var(--cite-dark-text);
  border-radius: 3px;
  padding: 0 0.15rem;
  cursor: pointer;
}

.source-line mark:hover,
.source-line mark:focus-visible,
.source-line mark.is-active {
  background: var(--cite-dark-text);
  color: var(--panel-bg);
  outline: none;
}

/* ---------- Light content sections ---------- */

.section {
  padding: var(--sp-8) 0;
}

.section-alt {
  background: var(--surface);
}

.section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}

.scope-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
}

.scope-col .bar {
  width: 34px;
  height: 3px;
  background: var(--amber);
  margin-bottom: var(--sp-2);
}

.scope-col h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.scope-col p {
  margin: 0;
  color: var(--grey);
  font-size: 0.96rem;
  max-width: 44ch;
}

.access p {
  margin: 0 0 var(--sp-2);
  color: var(--grey);
  max-width: 60ch;
}

.access p:last-child {
  margin-bottom: 0;
}

.access code {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 0.05rem 0.35rem;
  font-size: 0.9em;
  color: var(--ink);
}

/* Prose links inside body copy carry an underline affordance by default
   (global `a` rule above), WCAG 1.4.1, not color alone. */

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-4) 0;
  text-align: center;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  padding: 0;
  margin: 0 0 var(--sp-2);
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.25rem 0.1rem;
}

.footer-links a:hover {
  color: var(--grey);
}

.footer-copy {
  color: var(--grey);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .hero-copy--wide {
    max-width: none;
  }

  .scope-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .nav {
    justify-content: center;
    text-align: center;
  }

  .brand {
    margin-right: 0;
    width: 100%;
    text-align: center;
  }
}

/* Respect reduced-motion preference: no transition/animation/smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}