/* ============================================================
   kymeer brand kit — shared design tokens + primitives
   Single source of truth for index.html, /onboard/, /docs/, /brand/.
   ============================================================ */

@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800;
  src:url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-display:swap;
}

:root{
  /* ink scale (dark surfaces) */
  --ink:#0b141c; --ink2:#0e1c26; --ink3:#0f1f2a; --ink-line:#1f3140;
  /* body scale (light surfaces) */
  --body:#3a4854; --faint:#6b7b88; --mist:#eef3f4; --line:#dbe3e7;
  /* brand */
  --brand:#0fa3b1; --cyan:#2ee6c9; --brand-deep:#0b6e78; --brand-faint:#f0f7f8;
  /* on-dark text */
  --on-ink:#c4d3da; --on-ink-dim:#7e93a0;
  /* status */
  --danger:#ff7b8f; --amber:#ffb454; --good:#2ee6c9;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; height:100%;}
/* sticky-footer layout: on a page short enough not to fill the viewport
   (e.g. /docs/, a header + a couple tiles + footer), this pins the footer
   to the bottom instead of leaving the body's white background exposed
   below it. main (or the last content block before footer) grows to fill
   the gap; footer itself doesn't need any change. */
body{margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:'Bricolage Grotesque',"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--body); background:#fff; line-height:1.6; font-size:16px;}
body > main, body > header.docs-hero{flex:1;}
footer{margin-top:auto; flex-shrink:0;}
h1,h2,h3{color:var(--ink); line-height:1.15; margin:0; text-wrap:balance;}
p{margin:0 0 14px;}
a{color:var(--brand-deep);}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
.eyebrow{font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand-deep); margin:0 0 14px; font-weight:600;}
.eyebrow::before{content:"— "; color:var(--brand);}
.eyebrow.on-ink{color:var(--cyan);}
section{padding:76px 0 60px;}
section.alt{background:var(--mist);}
.sec-h2{font-size:36px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px;}
.sec-sub{color:var(--faint); font-size:15.5px; max-width:62ch; margin-bottom:38px;}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; font-size:15px;
  text-decoration:none; letter-spacing:.01em; transition:transform .18s ease, box-shadow .18s ease;
  border:none; cursor:pointer; font-family:inherit;}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--cyan)); color:#052228;
  box-shadow:0 14px 30px -12px rgba(15,163,177,.55);}
.btn.primary:hover{box-shadow:0 20px 40px -14px rgba(15,163,177,.7);}
.btn.primary:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.btn.ghost{border:1.5px solid rgba(255,255,255,.35); color:#fff; background:transparent;}
.btn.ghost.on-light{border-color:var(--line); color:var(--ink);}
.btn.sm{padding:9px 18px; font-size:13.5px;}

/* ---------- top nav (shared across all pages) ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; padding:28px 0; flex-wrap:wrap; gap:18px;}
.wordmark{font-size:26px; font-weight:700; letter-spacing:-.02em; color:#fff; text-decoration:none; display:inline-block;}
.wordmark::after{content:""; display:inline-block; width:9px; height:9px; background:var(--cyan); margin-left:5px;}
.topnav{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.topnav a:not(.btn){color:#cfe3e8; font-size:14.5px; font-weight:600; text-decoration:none; letter-spacing:.01em; transition:color .15s ease;}
.topnav a:not(.btn):hover{color:#fff;}
.topnav a.current{color:var(--cyan);}
.page-header{background:var(--ink); border-top:4px solid var(--brand);}

/* ---------- form controls (onboarding portal, future forms) ---------- */
.field{margin-bottom:22px;}
.field label{display:block; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:7px;}
.field .hint{font-size:12.5px; color:var(--faint); margin-top:5px;}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],
.field select,.field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line);
  font-family:inherit; font-size:15px; color:var(--ink); background:#fff; transition:border-color .15s ease;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand);}
/* invalid state is JS-driven (.field.invalid), not CSS :invalid -- an empty required
   field with no placeholder matches :invalid immediately, showing red before the user
   has typed anything. */
.field.invalid input,.field.invalid select{border-color:var(--danger);}
.field textarea{resize:vertical; min-height:90px;}
.check-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:14.5px; color:var(--body);}
.check-row input{margin-top:3px;}
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 18px;}
@media (max-width:600px){.check-grid{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.card{background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:28px;}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:99px;}
.badge.real{background:#e8f9f5; color:#0b6e78;}
.badge.partial{background:#fff4e0; color:#9a6400;}
.badge.beta{background:#eef1ff; color:#3949ab;}
.badge.stub{background:#fdeaea; color:#a13030;}

/* ---------- docs layout (shared: /docs/product, /docs/partners) ---------- */
.docs-shell{display:grid; grid-template-columns:250px 1fr; gap:56px; align-items:start; padding:44px 0 90px;}
@media (max-width:880px){
  .docs-shell{grid-template-columns:1fr;}
  .docs-main{order:1;}
  .docs-side{order:2; position:static; max-height:none; margin-top:48px; padding-top:24px; border-top:1px solid var(--line);}
}
.docs-side{position:sticky; top:24px; font-size:13.5px; max-height:calc(100vh - 48px); overflow-y:auto;}
.docs-side .grp{margin-bottom:22px;}
.docs-side .grp-h{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px; font-weight:700;}
.docs-side a{display:block; color:var(--body); text-decoration:none; padding:5px 0; border-left:2px solid transparent; padding-left:10px; margin-left:-11px;}
.docs-side a:hover{color:var(--brand-deep);}
.docs-side a.current{color:var(--brand-deep); border-left-color:var(--brand); font-weight:700;}
.docs-main{min-width:0; max-width:760px;}
.docs-main h1{font-size:34px; letter-spacing:-.02em; margin-bottom:8px;}
.docs-main .lede{color:var(--faint); font-size:16px; margin-bottom:36px;}
.docs-sec{padding-top:38px; margin-top:38px; border-top:1px solid var(--line); scroll-margin-top:24px;}
.docs-sec:first-of-type{border-top:none; margin-top:0; padding-top:0;}
.docs-sec h2{font-size:23px; letter-spacing:-.01em; margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.docs-sec .navhint{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--faint); margin-bottom:14px;}
.docs-sec h3{font-size:15px; margin:20px 0 8px; color:var(--ink);}
.docs-sec p{color:var(--body); font-size:15px; line-height:1.65;}
.docs-sec ol,.docs-sec ul{padding-left:22px; color:var(--body); font-size:15px; line-height:1.7;}
.docs-sec li{margin-bottom:4px;}
.docs-sec code{font-family:ui-monospace,Menlo,monospace; font-size:.88em; background:var(--mist); padding:1px 6px; border-radius:5px; color:var(--brand-deep);}
.docs-sec .pain{font-style:normal; color:var(--faint); border-left:2.5px solid var(--line); padding-left:16px; margin:0 0 14px;}
.callout{border-radius:10px; padding:16px 18px; font-size:14px; margin:16px 0; border:1.5px solid; line-height:1.6;}
.callout.info{background:var(--brand-faint); border-color:#bfe3e6; color:#0b4a52;}
.callout.warn{background:#fff8ec; border-color:#f3ddac; color:#7a5a12;}
.callout b{display:block; margin-bottom:3px;}
.docs-hero{background:var(--ink); border-top:4px solid var(--brand); padding:52px 0;}
.docs-hero h1{color:#fff; font-size:38px; letter-spacing:-.02em; margin-bottom:10px;}
.docs-hero p{color:var(--on-ink); font-size:16px; max-width:60ch;}
.doortiles{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px;}
@media (max-width:700px){.doortiles{grid-template-columns:1fr;}}
.doortile{background:#0e1c26; border:1.5px solid #1f3140; border-radius:14px; padding:26px; text-decoration:none; display:block; transition:transform .18s ease, border-color .18s ease;}
.doortile:hover{transform:translateY(-3px); border-color:var(--brand);}
.doortile h3{color:#fff; font-size:19px; margin-bottom:6px;}
.doortile p{color:var(--on-ink-dim); font-size:14px; margin:0;}
.doortile .go{color:var(--cyan); font-size:13px; font-weight:700; margin-top:12px; display:block;}

/* ---------- footer (shared) ---------- */
footer{background:var(--ink); color:var(--on-ink-dim); padding:34px 0; font-size:13px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
footer a{color:var(--on-ink);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}