/* Peptx AI — World C theme tokens + base. Light clinical luxury. */

@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-italic.woff2') format('woff2');
  font-weight:300 700;font-style:italic;font-display:swap;
}

:root{
  --bone:#f3efe6;
  --surface:#faf7f0;
  --card:#fdfbf6;
  --ink:#16211d;
  --body-c:#4b5148;
  --muted:#686d62;
  --faint:#726b5c;
  --accent:#0f9e86;
  --accent-strong:#0c8571;
  --accent-ink:#027b67;
  --accent-tint:rgba(15,158,134,.10);
  --line:#ece5d6;
  --line-strong:#e6dfd0;
  --icon-dark-a:#1f2a26;
  --icon-dark-b:#121a17;
  --shadow-card:0 8px 24px rgba(40,40,25,.07);
  --shadow-pop:0 18px 50px rgba(30,35,28,.18);
  --r-card:20px;
  --r-ctl:12px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
}

html{-webkit-text-size-adjust:100%}
body.px-light{
  margin:0;background:var(--bone);color:var(--body-c);
  font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.px-light ::selection{background:var(--accent-tint);color:var(--ink)}
body.px-light h1,body.px-light h2,body.px-light h3{font-family:var(--font-display);font-weight:500;color:var(--ink);letter-spacing:-.5px}

/* ── the wordmark ──
   ONE definition for the whole site. Matches .px-brand in the shell exactly, so
   the logo in a page body can never drift from the logo in the top bar. Replaces
   the old chrome/silver SVG wordmark, which belonged to the pre-World-C design.
   Markup: <span class="pxmark"><span class="p">Peptx</span><span class="ai">AI</span></span> */
.pxmark{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;user-select:none;line-height:1}
.pxmark .p{font-family:var(--font-display);font-weight:500;font-size:23px;letter-spacing:-.5px;color:var(--ink)}
.pxmark .ai{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:2.5px;
  color:var(--accent);transform:translateY(-2px)}
/* on the dark compound deck */
.pxmark--dark .p{color:#f3efe6}
.pxmark--dark .ai{color:#19bda1}
/* size variants */
.pxmark--lg .p{font-size:30px}
.pxmark--lg .ai{font-size:13px}
.pxmark--sm .p{font-size:19px}
.pxmark--sm .ai{font-size:9.5px;letter-spacing:2px}

/* shared primitives */
.pxcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.pxbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.1px;
  border-radius:14px;padding:12px 20px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.pxbtn:active{transform:translateY(1px)}
.pxbtn--solid{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(15,158,134,.28)}
.pxbtn--solid:hover{background:var(--accent-strong)}
.pxbtn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.pxbtn--ghost:hover{border-color:var(--muted)}
.eyebrow{font-family:var(--font-ui);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);font-weight:700}
.hairline{height:1px;background:var(--line);border:0}
.px-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent-strong);background:var(--accent-tint);
  border:1px solid rgba(15,158,134,.25);border-radius:20px;padding:5px 12px}

/* light scrollbar */
body.px-light::-webkit-scrollbar{width:10px}
body.px-light::-webkit-scrollbar-thumb{background:#d8d0bf;border-radius:6px;border:2px solid var(--bone)}
body.px-light::-webkit-scrollbar-track{background:var(--bone)}