/* ===========================================================================
   Aadya Labs — legacy-site visual bridge

   Load this file after /assets/site.css on the remaining legacy pages.
   It deliberately reuses the existing class names and interaction states: no
   markup, JavaScript, route, or content behaviour is changed here. The goal is
   to let the older PSDP chrome read as one quiet Aadya surface while those
   pages are migrated into the canonical templates.

   The bridge contains no network URLs or external assets. It uses the same
   self-hosted Aadya typefaces as the canonical pages, with system fallbacks.
   ========================================================================== */

@font-face {
  font-family: "Aadya Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-opsz-wght-normal-latin.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Aadya Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-wght-normal-latin.woff2") format("woff2-variations");
}

:root {
  /* Aadya light room: aged paper, ink, and one terracotta action colour. */
  --ink: #1f1b1a;
  --paper: #f4efe6;
  --surface: #fbf8f2;
  --surface-2: #efe8da;
  --border: #d8cfbe;
  --border-strong: #8b8071;
  --accent: #a23f1b;
  --accent-hover: #813014;
  --accent-tint: #f2dfd5;
  --amber: #76530b;
  --amber-tint: #f8ecd2;
  --red: #99351f;
  --red-tint: #f6dfd8;
  --muted: #6b645b;

  /* Aadya proof room / terminal. */
  --slate: #1a1714;
  --slate-text: #c9c0b4;
  --slate-accent: #e9b59c;
  --code-bg: #221e1a;
  --code-text: #eee6da;
  --code-green: #e9b59c;

  --font-sans: "Aadya Grotesk", "Inter", "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display: "Aadya Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", monospace;

  --container: 70rem;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(47, 39, 32, 0.05);
  --shadow-md: 0 12px 28px -20px rgba(47, 39, 32, 0.3);
  --nav-height: 5rem;
}

/* --------------------------------------------------------------------------
   Base type, links, and focus
   -------------------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration-color: #c9a18f;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--accent-tint);
  color: var(--ink);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h4 {
  color: var(--ink);
}

.lede,
.muted,
.field__hint,
.card > p,
.stat__note {
  color: var(--muted);
}

.kicker {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.12em;
}

:not(pre) > code {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 4px;
  color: var(--ink);
}

hr {
  border-top-color: var(--border);
}

.skip-link {
  background: var(--ink);
  color: #fff7ea;
}

.skip-link:focus-visible {
  outline-color: #fff7ea;
}

/* --------------------------------------------------------------------------
   Shared frame: navigation, hero, sections, and footer
   -------------------------------------------------------------------------- */

.site-nav {
  background: rgba(244, 239, 230, 0.95);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(87, 76, 62, 0.06);
}

.site-nav__inner {
  min-height: var(--nav-height);
}

.site-nav__brand {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.site-nav__brand:hover {
  color: var(--accent);
}

/* The inline legacy mark becomes an ink-and-paper mark without altering SVG
   markup. The final round is the sole terracotta signal. */
.site-nav__brand svg rect:nth-of-type(1),
.site-nav__brand svg rect:nth-of-type(2),
.site-nav__brand svg circle:nth-of-type(2) {
  fill: var(--ink) !important;
}

.site-nav__brand svg rect:nth-of-type(3),
.site-nav__brand svg circle:nth-of-type(1) {
  fill: var(--paper) !important;
}

.site-nav__brand svg circle:nth-of-type(3) {
  fill: var(--accent) !important;
}

.site-nav__links a {
  color: var(--muted);
  font-weight: 500;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current] {
  color: var(--ink);
}

.site-nav__links a[aria-current] {
  border-bottom-color: var(--ink);
}

.nav-toggle {
  background: var(--surface);
  border-color: var(--border-strong);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  background: var(--ink);
}

.site-nav__mobile {
  background: var(--paper);
  border-top-color: var(--border);
}

.site-nav__mobile a:not(.btn) {
  color: var(--ink);
}

.site-nav__mobile a:not(.btn):hover {
  background: var(--surface-2);
  color: var(--ink);
}

.site-nav__mobile a[aria-current] {
  background: var(--surface-2);
  color: var(--ink);
}

.hero {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 86%);
  border-bottom-color: var(--border);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.section--surface {
  background: var(--surface-2);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}

.section-head > h2 {
  font-family: var(--font-display);
  font-weight: 500;
}

.site-footer {
  background: var(--slate);
  color: var(--slate-text);
}

.site-footer a {
  color: var(--slate-text);
}

.site-footer a:hover {
  color: #fff7ea;
}

.site-footer__brand {
  color: #fff7ea;
  font-family: var(--font-display);
  font-weight: 500;
}

.site-footer__brand svg rect:nth-of-type(1),
.site-footer__brand svg rect:nth-of-type(2),
.site-footer__brand svg circle:nth-of-type(2) {
  fill: var(--slate) !important;
}

.site-footer__brand svg rect:nth-of-type(3),
.site-footer__brand svg circle:nth-of-type(1) {
  fill: #fff7ea !important;
}

.site-footer__brand svg circle:nth-of-type(3) {
  fill: var(--slate-accent) !important;
}

.site-footer h2,
.site-footer h3,
.site-footer__privacy {
  color: var(--slate-accent);
}

.site-footer__meta {
  border-top-color: #39332d;
}

.site-footer :focus-visible,
.terminal :focus-visible {
  outline-color: #fff7ea;
}

/* --------------------------------------------------------------------------
   Reusable surfaces: actions, cards, data, and quiet honesty callouts
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.btn--primary {
  background: linear-gradient(180deg, #b5471f 0%, #a23f1b 100%);
  border-color: #a23f1b;
  color: #fff7ea;
  box-shadow: inset 0 1px 0 rgba(255, 247, 234, 0.16), var(--shadow-sm);
}

.btn--primary:hover {
  background: linear-gradient(180deg, #a5421c 0%, #813014 100%);
  border-color: #813014;
  color: #fff7ea;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink);
  color: var(--ink);
}

.btn:focus-visible {
  outline-color: var(--ink);
}

.card,
.stat {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card__foot {
  border-top-color: var(--border);
  color: var(--muted);
}

.stat__value {
  color: var(--ink);
}

.stat__value em {
  color: var(--accent);
}

.table-wrap {
  background-color: var(--surface);
  border-color: var(--border);
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(251, 248, 242, 0)),
    linear-gradient(to left, var(--surface) 30%, rgba(251, 248, 242, 0)),
    radial-gradient(farthest-side at left center, rgba(47, 39, 32, 0.16), rgba(47, 39, 32, 0)),
    radial-gradient(farthest-side at right center, rgba(47, 39, 32, 0.16), rgba(47, 39, 32, 0));
}

.table caption,
.table th {
  color: var(--muted);
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

.table td {
  border-bottom-color: var(--border);
}

.table tbody tr:hover {
  background: var(--surface-2);
}

.callout {
  background: transparent;
  border-color: var(--border);
  border-left-color: var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.callout__title {
  color: var(--muted);
}

.callout--warn {
  border-left-color: var(--amber);
}

.callout--warn .callout__title {
  color: var(--amber);
}

.badge--pass,
.form-status--success {
  color: #2e6e4e;
  background: #e4efe7;
  border-color: #b8d4c0;
}

.badge--partial {
  color: var(--amber);
  background: var(--amber-tint);
  border-color: #dfca9f;
}

.badge--fail,
.form-status--error {
  color: var(--red);
  background: var(--red-tint);
  border-color: #dfb9ae;
}

.badge--neutral,
.form-status--pending {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--border);
}

/* --------------------------------------------------------------------------
   Forms and proof-room code blocks
   -------------------------------------------------------------------------- */

.field > input,
.field > textarea,
.field > select {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.field > input::placeholder,
.field > textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field > input:focus,
.field > textarea:focus,
.field > select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(31, 27, 26, 0.16);
}

.field.has-error > input,
.field.has-error > textarea,
.field.has-error > select {
  border-color: var(--red);
}

.field__error {
  color: var(--red);
}

.terminal {
  background: var(--code-bg);
  border-color: #39332d;
  box-shadow: var(--shadow-sm);
}

.terminal__bar {
  border-bottom-color: #39332d;
}

.terminal__title,
.terminal .out {
  color: #c9c0b4;
}

.terminal pre {
  color: var(--code-text);
}

.terminal .prompt {
  color: var(--code-green);
}

.copy-btn {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}

.copy-btn:hover {
  color: var(--ink);
  background: var(--paper);
}

.copy-btn:focus-visible {
  outline-color: var(--ink);
}

.copy-btn.is-copied {
  color: #2e6e4e;
  border-color: #2e6e4e;
}

.terminal .copy-btn {
  color: #fff7ea;
  background: rgba(255, 247, 234, 0.08);
  border-color: #62594e;
}

.terminal .copy-btn:hover {
  background: rgba(255, 247, 234, 0.16);
}

.terminal .copy-btn:focus-visible {
  outline-color: #fff7ea;
}

/* Keep legacy async panels and wallet widgets visually in the same light room.
   Their display/hidden states, dimensions, and JavaScript-owned classes remain
   untouched. */
.age-zk__status,
.age-zk__result,
.mfa__status,
.mfa__result,
.unlink__status,
.unlink__site,
.unlink__verdict,
.agent-cap__status,
.agent-cap__result,
.wd-status,
.wd-result,
.wd-link__url,
.wd-qr {
  background: var(--surface-2);
  border-color: var(--border);
}

.wd-num {
  background: var(--accent);
  color: #fff7ea;
}

/* --------------------------------------------------------------------------
   Accessibility safeguards
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  .site-nav,
  .section--surface,
  .card,
  .stat,
  .table-wrap,
  .field > input,
  .field > textarea,
  .field > select {
    border-color: var(--ink);
  }

  .btn--primary {
    background: #813014;
    border-color: #813014;
  }
}

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