/* ============================================================================
   v8 THEME LAYER for the React funnel/legal/partner pages.
   Brings the SPA to the same design language as the static homepage:
   Geist, dark ground, jade accent, hairline chrome, no dotted paper.
   Loaded AFTER the app stylesheet, so plain specificity wins; !important is
   used only where Tailwind arbitrary-value utilities set the same property.
   ========================================================================== */

:root{
  /* all 13 app variables remapped, light -> dark. Anything left un-remapped
     renders near-black text on the near-black ground (this bit the legal
     pages, which are the only consumer of --naa-ink-soft). */
  --naa-paper:#0a0a0a;        /* was #faf8f3 */
  --naa-paper-2:#101010;      /* was #fff    */
  --naa-paper-warm:#141414;   /* was #f3efe4 */
  --naa-ink:#ededed;          /* was #0a0a0a */
  --naa-ink-soft:#d4d4d4;     /* was #131313 */
  --naa-ink-sub:#b4b4b4;      /* was #2a2a2a */
  --naa-mute:#a3a3a3;         /* was #525252 */
  --naa-mute-2:#9a9a9a;       /* was #7a7a7a */
  --naa-line:#2e2e2e;         /* was #cfc9bb */
  --naa-line-soft:#242424;    /* was #e7e2d4 */
  --naa-accent:#2bc48a;       /* was #0045e5 */
  --naa-success:#2bc48a;      /* was #007d5c */
  --naa-warn:#f5934f;         /* was #db4f1a, lifted for dark-ground contrast */

  /* v8 tokens */
  --v8-canvas:#101010;
  --v8-jade:#2bc48a;
  --v8-jade-deep:#0e9f6e;
  --v8-btn-bg:#ededed;
  --v8-btn-fg:#0a0a0a;
  --v8-sans:"Geist",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --v8-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html{color-scheme:dark}
body{
  background:var(--naa-paper);
  color:var(--naa-ink);
  font-family:var(--v8-sans);
  -webkit-font-smoothing:antialiased;
}
::selection{background:#ededed;color:#0a0a0a}

/* kill the dotted paper, keep the layout contract */
.nb-canvas{
  background-color:var(--naa-paper) !important;
  background-image:
    radial-gradient(42% 38% at 22% 0%,rgba(43,196,138,.10),transparent 70%),
    radial-gradient(38% 34% at 82% 4%,rgba(123,239,196,.07),transparent 72%) !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
}

/* display face: Geist, weight ceiling 600 (was Inter 700) */
.naa-display{
  font-family:var(--v8-sans) !important;
  font-weight:600 !important;
  letter-spacing:-.042em !important;
  line-height:1.06 !important;
}

/* ---------- surfaces ---------- */
/* white cards/inputs become the elevated dark surface */
.nb-content .bg-white,
.bg-white{background-color:var(--v8-canvas) !important}
.bg-\[\#FFFFFF66\]{background-color:rgba(255,255,255,.02) !important}

/* ---------- inputs ---------- */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],
input:not([type]),textarea,select{
  background-color:var(--v8-canvas) !important;
  color:var(--naa-ink) !important;
  border-color:var(--naa-line) !important;
  font-family:var(--v8-sans);
  letter-spacing:-.008em;
}
input::placeholder,textarea::placeholder{color:#6f6f6f !important}
input:-webkit-autofill{
  -webkit-text-fill-color:var(--naa-ink);
  -webkit-box-shadow:0 0 0 1000px var(--v8-canvas) inset;
}

/* focus + hover accents: the app hardcodes #0045E5 in these utilities */
.focus\:border-\[\#0045E5\]:focus{border-color:var(--v8-jade) !important}
.focus\:ring-\[\#0045E51F\]:focus{
  --tw-ring-color:rgba(43,196,138,.22) !important;
  box-shadow:0 0 0 2px rgba(43,196,138,.22) !important;
}
.hover\:border-\[\#0045E5\]:hover{border-color:var(--v8-jade) !important}
.hover\:text-\[\#0045E5\]:hover{color:var(--v8-jade) !important}
.hover\:shadow-\[0_8px_24px_rgba\(0\,69\,229\,0\.08\)\]:hover{
  box-shadow:0 8px 24px rgba(14,159,110,.28) !important;
}
.text-\[\#0045E5\]{color:var(--v8-jade) !important}
.bg-\[\#0045E5\]{background-color:var(--v8-jade) !important}
.hover\:bg-\[\#00000005\]:hover{background-color:rgba(255,255,255,.035) !important}

/* ---------- primary action ---------- */
/* the app paints this with bg-[var(--naa-ink)] + text-white; on the dark
   ground it becomes the v8 light pill with a jade under-glow */
.bg-\[var\(--naa-ink\)\]{
  background-color:var(--v8-btn-bg) !important;
  color:var(--v8-btn-fg) !important;
  box-shadow:0 8px 24px -10px rgba(14,159,110,.55);
  transition:transform .18s ease,box-shadow .18s ease;
}
.bg-\[var\(--naa-ink\)\]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 30px -10px rgba(14,159,110,.7);
}
.bg-\[var\(--naa-ink\)\].text-white,
.bg-\[var\(--naa-ink\)\] .text-white,
.bg-\[var\(--naa-ink\)\] *{color:var(--v8-btn-fg) !important}
/* the light pill used on dark strips inverts the other way */
.text-\[var\(--naa-ink\)\]{color:var(--naa-ink) !important}

/* Inline-styled "active" chips (e.g. the EN/DE switch) set
   background:var(--naa-ink) with hardcoded white text. Once --naa-ink is light,
   that is white-on-light; force the readable pair. */
[style*="var(--naa-ink)"]{color:var(--v8-btn-fg) !important}

/* progress bar fill */
.h-full.rounded-full{background-color:var(--v8-jade) !important}

/* ---------- wordmark ----------
   The old kit draws "NAA" as an animated canvas (AntText). It cannot be
   recoloured from CSS and reads as a gimmick against the new language, so it is
   replaced with the same wordmark the homepage uses. */
[role="img"][aria-label="NAA"]{
  line-height:1 !important;
  display:inline-flex !important;
  align-items:baseline;
  gap:7px;
}
[role="img"][aria-label="NAA"] canvas{display:none !important}
[role="img"][aria-label="NAA"]::before{
  content:"NAA";
  font-family:var(--v8-sans);
  font-size:19px;font-weight:600;letter-spacing:-.036em;
  color:var(--naa-ink);
}
[role="img"][aria-label="NAA"]::after{
  content:"";
  width:8px;height:8px;border-radius:2px;background:var(--v8-jade);
  align-self:center;
  box-shadow:0 0 8px rgba(43,196,138,.6);
}

/* ---------- the old kit's card ----------
   .nb-card is a white paper card, often tilted a fraction of a degree to look
   hand-placed. Both the white and the tilt belong to the old language. */
.nb-card{
  background:var(--v8-canvas) !important;
  border-color:var(--naa-line) !important;
  box-shadow:inset 0 0 0 1px var(--naa-line-soft),0 2px 2px rgba(0,0,0,.16),0 8px 8px -8px rgba(0,0,0,.2) !important;
}
[class*="rotate-[-0.6deg]"],[class*="rotate-[0.6deg]"],
[class*="rotate-[-1"],[class*="rotate-[1"]{transform:none !important}

/* ---------- shadcn tokens (the /404 card) ---------- */
:root{
  --background:#0a0a0a;
  --foreground:#ededed;
  --card:#101010;
  --card-foreground:#ededed;
  --popover:#101010;
  --popover-foreground:#ededed;
  --primary:#ededed;
  --primary-foreground:#0a0a0a;
  --secondary:#1a1a1a;
  --secondary-foreground:#ededed;
  --muted:#1a1a1a;
  --muted-foreground:#a3a3a3;
  --accent:#1a1a1a;
  --accent-foreground:#ededed;
  --border:#2e2e2e;
  --input:#2e2e2e;
  --ring:#2bc48a;
}

/* the kit's own primary pill: painted from --naa-ink, so it flips light and
   needs the dark label */
.naa-pill-primary{
  background:var(--v8-btn-bg) !important;
  color:var(--v8-btn-fg) !important;
  box-shadow:0 8px 24px -10px rgba(14,159,110,.55);
}
.naa-pill-primary *{color:var(--v8-btn-fg) !important}

/* the /404 page ships stock shadcn slate + blue, untouched by the kit */
.text-slate-700,.text-slate-600,.text-slate-500,.text-slate-800,.text-slate-900{
  color:var(--naa-ink-soft) !important;
}
.text-slate-600,.text-slate-500{color:var(--naa-mute) !important}
.bg-blue-600,.bg-blue-500,[class*="bg-primary"]{
  background-color:var(--v8-btn-bg) !important;color:var(--v8-btn-fg) !important;
}
[class*="bg-primary"] *{color:var(--v8-btn-fg) !important}

/* last hiding place of the old blue: inline style="color: rgb(0, 69, 229)" */
[style*="rgb(0, 69, 229)"],[style*="#0045E5"],[style*="#0045e5"]{color:var(--v8-jade) !important}

/* ---------- misc chrome ---------- */
.calendly-inline-widget{
  border-color:var(--naa-line) !important;
  background:#ffffff !important; /* Calendly renders its own light UI */
}
hr,.h-px{background-color:var(--naa-line-soft) !important}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--v8-jade);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}