/* =====================================================================
   smartmd-theme.css — SMART MD shared design-token layer + chrome kit.
   JOURNEY-ARCH-SPEC §1/§2. One generator of the design system.
   "Red is our green": red speaks, blue whispers, ink is everything else.
   Components reference ROLE tokens only (--accent*, --support*, --env-line).
   New classes are .smx-namespaced where they add to a page (§2).
   ===================================================================== */
:root{
  /* primitives — values verbatim from home-v2.html :root */
  --ink:#0C1118; --body:#3A4351; --muted:#6B7482; --line:#E4E8EE; --surface:#F6F8FA;
  --red-brand:#E01F2D; --red-action:#C8102E; --red-action-hover:#A80D27; --red-glow:rgba(224,31,45,.16);
  --blue:#1A56C4; --blue-deep:#12408F; --blue-tint:#EDF3FE; --blue-line:#C7D9F7;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ROLE tokens (§1.1) */
  --accent:var(--red-action);
  --accent-hover:var(--red-action-hover);
  --accent-brand:var(--red-brand);
  --accent-glow:var(--red-glow);
  --accent-flood:linear-gradient(160deg,#C8102E,#8F0B20); /* §6 ask-moment ONLY */
  --support:var(--blue); --support-deep:var(--blue-deep);
  --support-tint:var(--blue-tint); --support-line:var(--blue-line);
  --env-line:var(--line);
  --mono:'IBM Plex Mono',monospace; --display:'Space Grotesk',sans-serif;
  --notch:14px;
}

/* =====================================================================
   §4 SCRAMBLE-DECODE — visual layer is aria-hidden; real text .sr-only.
   Constant length -> zero layout shift. Chars tint --accent while resolving.
   ===================================================================== */
.decode .smx-decode-vis{color:inherit}
.decode .smx-decode-vis .rz{color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .decode .smx-decode-vis .rz{color:inherit}
}

/* =====================================================================
   §5 ENVIRONMENT — clinical depth on white: 62° hairlines + grid patches,
   slow parallax, behind every section (z:1, pointer-events:none).
   ===================================================================== */
body{position:relative}
.smx-env{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.smx-env svg{position:absolute;display:block}
.smx-env .pa,.smx-env .pb{will-change:transform}

/* =====================================================================
   §1.3 CHROME KIT (applied per-surface from P2 onward)
   ===================================================================== */
.smx-chip{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  border:1px solid var(--env-line);
  border-radius:0;
  background:#fff;
}
.smx-btn{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  border-radius:0;
  font-family:var(--mono);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.smx-btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:none;
}
.smx-btn-ghost:hover{background:rgba(12,17,24,.05)}

/* =====================================================================
   §6.3 FOOTER WORDMARK BOOKEND — giant ghosted static text, aria-hidden.
   ===================================================================== */
.smx-bookend{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(90px,14vw,240px);
  letter-spacing:-.02em;
  line-height:.9;
  color:rgba(12,17,24,.07);
  white-space:nowrap;
  overflow:hidden;
  user-select:none;
  text-align:center;
  margin-bottom:28px;
}
.smx-bookend .md{color:rgba(224,31,45,.12)}
@media (max-width:640px){.smx-bookend{font-size:clamp(52px,15vw,90px)}}

/* §6.4 contextual nav — active ROUTE underline (static per page) */
.smx-nav-active{position:relative}
.smx-nav-active::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--accent)}