/* Shared design layer for the FIDES docs and app. Tokens mirror the homepage:
   FK Grotesk, #131313 page, #181818 surfaces, #222529 code, 16px radius, pill buttons. */

@font-face{font-family:"FK Grotesk";src:url(/_next/static/media/fk-grotesk-regular.3v9t21tz4qqd8.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FK Grotesk";src:url(/_next/static/media/fk-grotesk-light.0e6zjty3z2xc3.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"FK Grotesk Mono";src:url(/_next/static/media/fk-grotesk-mono-regular.1eo02jyn3hq_u.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#131313;--surface:#181818;--surface-2:#1f1f1f;--code:#222529;
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);
  --text:#fff;--muted:rgba(255,255,255,.5);--soft:rgb(156,157,159);
  --accent:#5b8cff;--accent-fill:#2f6be0;--ok:#2fd38a;--bad:#ff5c6a;--warn:#e8b339;
  --radius:16px;--sans:"FK Grotesk",system-ui,sans-serif;--mono:"FK Grotesk Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.2;text-wrap:balance}
h1{font-size:44px}h2{font-size:32px}h3{font-size:20px;font-weight:400}h4{font-size:16px;font-weight:400}
p{margin:0}
code,pre,kbd{font-family:var(--mono)}
::selection{background:rgba(91,140,255,.4)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* top bar */
.o-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:80px;padding:0 64px;background:rgba(19,19,19,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.o-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:22px;letter-spacing:.04em;line-height:1}
.o-brand img{width:21px;height:22px}
.o-brand small{margin-left:4px;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.o-nav{display:flex;gap:28px;margin-left:auto}
.o-nav a{color:var(--muted);text-decoration:none;transition:color .15s}
.o-nav a:hover,.o-nav a[aria-current]{color:var(--text)}

/* buttons */
.o-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border:0;border-radius:22px;background:rgba(255,255,255,.15);color:#fff;font:400 16px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s}
.o-btn:hover{background:rgba(255,255,255,.22)}
.o-btn-primary{background:linear-gradient(135deg,#2a5fd0,#3f7bf0 55%,#2a5fd0)}
.o-btn-primary:hover{background:linear-gradient(135deg,#3068dc,#4b86f7 55%,#3068dc)}
.o-btn-ghost{background:none;color:var(--muted);padding:0 12px}
.o-btn-ghost:hover{background:rgba(255,255,255,.06);color:#fff}
.o-btn-danger{background:rgba(255,92,106,.16);color:#ff8f99}
.o-btn-danger:hover{background:rgba(255,92,106,.26)}
.o-btn-sm{height:34px;padding:0 16px;font-size:14px}
.o-btn[disabled]{opacity:.4;cursor:not-allowed}

/* surfaces */
.o-card{background:var(--surface);border-radius:var(--radius);padding:28px}
.o-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.o-muted{color:var(--muted)}
.o-mono{font-family:var(--mono)}
.o-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-family:var(--mono);font-size:12px;letter-spacing:.04em;white-space:nowrap}
.o-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.o-pill.ok{color:var(--ok);background:rgba(47,211,138,.12)}
.o-pill.bad{color:#ff8f99;background:rgba(255,92,106,.12)}
.o-pill.warn{color:var(--warn);background:rgba(232,179,57,.12)}
.o-pill.info{color:#a9c3ff;background:rgba(91,140,255,.14)}
.o-pill.plain::before{display:none}

/* code */
pre{margin:0;padding:20px 24px;border-radius:var(--radius);background:var(--code);font-size:13px;line-height:1.6;overflow-x:auto;tab-size:2}
:not(pre)>code{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);font-size:.88em}
.tok-c{color:#7d8590;font-style:italic}.tok-k{color:#9ecbff}.tok-s{color:#a5d6a7}.tok-n{color:#f2cc8f}.tok-t{color:#5fd4b1}

/* tables */
.o-table-wrap{overflow-x:auto;border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* notices */
.o-note{padding:16px 20px;border-radius:12px;background:rgba(91,140,255,.1);box-shadow:inset 3px 0 0 var(--accent);color:rgb(200,210,235);font-size:15px}
.o-note.warn{background:rgba(232,179,57,.09);box-shadow:inset 3px 0 0 var(--warn);color:rgb(235,220,180)}
.o-note strong{color:#fff;font-weight:400}

@media (max-width:900px){
  .o-top{padding:0 20px;gap:16px;height:64px}
  .o-nav{display:none}
  h1{font-size:34px}h2{font-size:26px}
}