/* ==========================================================================
   docs.sekondbrain.ai — shared stylesheet
   Derived from SeKondBrain Brand Book v6 (April 2026).
   Every colour, radius and spacing value below traces to that document.
   Do not introduce a value that is not in the token block.
   ========================================================================== */

:root{
  /* Accents — Framer tokens from the live site */
  --c-pink:#E24AF2; --c-purple:#8B78F5; --c-blue:#1A8AF6;
  --c-orange:#F28B68; --c-yellow:#E6B800; --c-mint:#3DD680;

  /* Aurora peaks — atmospheric, desaturated cousins of the accents */
  --a-pink:#FE93FD; --a-blue:#5FC4F0; --a-mint:#40CB68;
  --a-violet:#D8ABFE; --a-peach:#F5C9B0;

  /* Neutrals */
  --paper:#FAFAF7; --ink:#000; --grey:#969696;
  --fg-2:rgba(0,0,0,.45); --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.06);
  --danger:#EF4444;

  /* Type — TT Interphases Pro is licensed; Inter is the sanctioned web proxy */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* Radius */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* One aurora veil per page. Mood is set per page via --veil-a / --veil-b. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 40% at 12% -6%, var(--veil-a, rgba(95,196,240,.20)), transparent 70%),
    radial-gradient(ellipse 55% 35% at 92% 4%, var(--veil-b, rgba(216,171,254,.16)), transparent 72%);
}

.wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 var(--sp-5)}

/* ---------- masthead ---------- */
header.top{
  position:sticky;top:0;z-index:20;
  background:rgba(250,250,247,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-2);
}
.top-in{display:flex;align-items:center;gap:14px;height:60px}
.mark{width:26px;height:26px;flex:none}
.brandline{font-weight:600;letter-spacing:-.02em;font-size:15px;text-decoration:none;color:var(--ink)}
.brandline span{color:var(--fg-2);font-weight:500}
.top-links{margin-left:auto;display:flex;gap:20px;font-size:13.5px}
.top-links a{color:var(--fg-2);text-decoration:none}
.top-links a:hover{color:var(--ink)}
@media (max-width:620px){.top-links a:not(:last-child){display:none}}

/* ---------- hero ---------- */
.hero{padding:var(--sp-7) 0 var(--sp-6)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--grey);margin-bottom:20px;
}
.pill i{width:6px;height:6px;border-radius:999px;background:var(--c-blue);display:block}

h1{
  font-size:clamp(38px,6.4vw,72px);line-height:1.02;letter-spacing:-.04em;
  font-weight:600;margin:0 0 20px;max-width:15ch;
}
h1 em{font-style:normal;color:var(--grey)}          /* ghost-stack second clause */

.lede{font-size:20px;line-height:1.45;font-weight:500;max-width:62ch;margin:0 0 var(--sp-5)}
.lede + p{font-size:16px;color:var(--fg-2);max-width:66ch;margin:0}

.addr{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--sp-6);
  padding:14px 16px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-lg);max-width:640px;
}
.addr .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);
}
.addr code{font-family:var(--mono);font-size:13.5px;color:var(--ink)}

/* ---------- two-column docs layout ---------- */
.cols{display:grid;grid-template-columns:196px 1fr;gap:var(--sp-7);padding-bottom:96px}
nav.side{position:sticky;top:84px;align-self:start;font-size:13.5px}
nav.side a{
  display:block;padding:5px 0 5px 12px;margin-left:-12px;
  color:var(--fg-2);text-decoration:none;border-left:1.5px solid transparent;
}
nav.side a:hover{color:var(--ink);border-left-color:var(--c-purple)}
nav.side .grp{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin:20px 0 6px;
}
nav.side .grp:first-child{margin-top:0}

section{padding-top:var(--sp-7);scroll-margin-top:84px}
section + section{border-top:1px solid var(--hair-2);margin-top:var(--sp-7)}

h2{font-size:34px;line-height:1.1;letter-spacing:-.035em;font-weight:600;margin:0 0 var(--sp-5)}
h3{font-size:17px;letter-spacing:-.015em;font-weight:600;margin:var(--sp-6) 0 10px}
p{max-width:70ch;margin:0 0 14px}
strong{font-weight:600}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.28)}
ol,ul{max-width:70ch;padding-left:20px;margin:0 0 14px}
li{margin-bottom:7px}
.muted{color:var(--fg-2)}

/* ---------- code ---------- */
pre{
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:16px 18px;overflow-x:auto;margin:0 0 18px;max-width:760px;
}
code{font-family:var(--mono);font-size:13px}
p code,li code,td code{
  background:rgba(139,120,245,.09);padding:1px 5px;
  border-radius:var(--r-sm);font-size:12.5px;
}
pre code{background:none;padding:0;line-height:1.6}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;max-width:820px;margin:0 0 18px;font-size:14.5px}
th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);font-weight:400;
  padding:0 14px 8px 0;border-bottom:1px solid var(--hair);
}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair-2);vertical-align:top}
td:first-child{white-space:nowrap}
@media (max-width:720px){td:first-child{white-space:normal}}

/* ---------- signature: tool annotation grades ----------
   Read / write / destructive carry the brand status-dot colours. The dot is
   not decoration — it renders the readOnlyHint / destructiveHint contract. */
.grade{display:flex;align-items:center;gap:10px;margin:var(--sp-6) 0 4px}
.dot{width:9px;height:9px;border-radius:999px;flex:none;box-shadow:0 0 0 3px var(--paper)}
.dot.read{background:var(--c-mint);box-shadow:0 0 0 3px var(--paper),0 0 8px rgba(61,214,128,.55)}
.dot.write{background:var(--c-yellow);box-shadow:0 0 0 3px var(--paper),0 0 8px rgba(230,184,0,.45)}
.dot.del{background:var(--danger);box-shadow:0 0 0 3px var(--paper),0 0 8px rgba(239,68,68,.45)}
.grade h3{margin:0;font-size:17px}
.grade .ann{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--grey);margin-left:auto;white-space:nowrap;
}
p.count{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin:0 0 14px;
}
@media (max-width:720px){.grade .ann{display:none}}

/* ---------- callout ---------- */
.note{border-left:1.5px solid var(--c-purple);padding:2px 0 2px 18px;margin:0 0 18px;max-width:70ch}
.note p:last-child{margin-bottom:0}
.note .lbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-purple);display:block;margin-bottom:6px;
}

/* ---------- product index (docs root) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--sp-4);max-width:900px;padding-bottom:96px}
.card{
  display:block;text-decoration:none;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px 22px 20px;
  transition:opacity .15s ease-out,transform .2s ease-in-out;
}
.card:hover{opacity:.9;transform:translateY(-1px)}
.card[aria-disabled="true"]{pointer-events:none;background:transparent;border-style:dashed}
.card .eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);display:flex;align-items:center;gap:7px;margin-bottom:12px;
}
.card .eyebrow i{width:6px;height:6px;border-radius:999px;display:block;background:var(--c-purple)}
.card h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.card p{margin:0;font-size:14.5px;color:var(--fg-2);max-width:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair-2);padding:var(--sp-6) 0 64px;font-size:13.5px;color:var(--fg-2)}
footer a{color:var(--fg-2)}
footer .fl{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:18px}

@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:0}
  nav.side{display:none}
  h2{font-size:28px}
}

:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(139,120,245,.28);border-radius:var(--r-sm)}