/* ═══════════════════════════════════════════════════════════
   COTON · Design System — v1 shared shell
   Bleu Marine + Or + Crème · Tabbed multi-page docs
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Brand ── */
  --marine:#17234D;
  --marine-2:#1F2F66;
  --marine-3:#0E1633;
  --or:#C9953D;
  --or-2:#E0AF54;
  --or-soft:#F4E5C2;
  --creme:#FAF6E9;
  --creme-2:#F2EDD8;
  --creme-3:#EAE3C5;

  /* ── Surfaces ── */
  --bg:#FFFFFF;
  --bg-paper:#FFFFFF;
  --bg-soft:#FBF7E8;
  --bg-deep:var(--marine);

  /* ── Ink ── */
  --ink:#0E1633;
  --ink-2:#37425E;
  --ink-3:#6B7388;
  --ink-4:#A2A8B8;
  --ink-on-marine:#F4F1E2;

  /* ── Lines ── */
  --line:#ECE9DD;
  --line-2:#DDD8C3;
  --line-3:#C9C2A4;
  --line-marine:rgba(244,241,226,.18);

  /* ── Status ── */
  --green:#0E8C4A;
  --red:#C8392B;
  --amber:#B57A0F;

  /* ── Type ── */
  --serif:"Fraunces", "Tiempos Headline", Georgia, serif;
  --sans:"Inter Tight", "Inter", -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* ── Motion ── */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
  font-feature-settings:"ss01","cv11";
}
a{color:var(--marine); text-decoration:none}
a:hover{color:var(--or)}
::selection{background:var(--marine); color:var(--creme)}
img{max-width:100%; display:block}
hr{border:0; border-top:1px solid var(--line); margin:32px 0}

/* ─── Background: white with cream blur-blobs + faint dot grid ─── */
body{ position:relative; overflow-x:hidden}
body::before{
  /* dot grid (very faint) */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,35,77,.018) 1px, transparent 0);
  background-size: 28px 28px;
}
body::after{
  /* cream blur blobs — small, sparse, ambient only */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(360px 280px at 92% 8%,  rgba(244,229,194,.32), transparent 70%),
    radial-gradient(280px 220px at 4% 62%,  rgba(250,246,233,.40), transparent 72%),
    radial-gradient(320px 240px at 78% 88%, rgba(244,229,194,.20), transparent 70%);
  filter:blur(28px);
}

/* ═══════════════════════════════════════════════════════════
   TOP BAR  —  brand · primary tabs · meta
   ═══════════════════════════════════════════════════════════ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.topbar-row{
  max-width:1320px; margin:0 auto;
  padding:0 36px; height:60px;
  display:flex; align-items:center; gap:28px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
}
.brand .mark{
  width:28px; height:28px;
  background:var(--marine);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  padding:5px;
}
.brand .mark svg{ width:100%; height:100%; display:block; color:var(--creme)}
.brand .name{
  font-family:var(--serif); font-size:18px; font-weight:500;
  letter-spacing:-.01em; line-height:1;
}
.brand .name em{ font-style:italic; color:var(--or); font-weight:400}
.brand .sub{
  font-size:11.5px; color:var(--ink-3);
  letter-spacing:.06em; text-transform:uppercase;
  padding-left:11px; margin-left:3px;
  border-left:1px solid var(--line-2);
}

.tabs{
  display:flex; align-items:center; gap:2px;
  margin-left:8px;
}
.tabs a{
  position:relative;
  padding:8px 14px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  border-radius:7px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color 160ms, background 160ms;
}
.tabs a:hover{ background:#F5F2E5; color:var(--ink)}
.tabs a.on{
  color:var(--marine); background:transparent;
  font-weight:600;
}
.tabs a.on::after{
  content:""; position:absolute;
  left:14px; right:14px; bottom:-13px; height:2px;
  background:var(--or); border-radius:2px 2px 0 0;
}
.tabs .num{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-4);
  font-weight:500;
}
.tabs a.on .num{ color:var(--or)}

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px}
.search-trigger{
  display:flex; align-items:center; gap:10px;
  height:32px; padding:0 12px 0 11px;
  border:1px solid var(--line-2); border-radius:8px;
  background:rgba(255,255,255,.7);
  font-size:12.5px; color:var(--ink-3);
  cursor:pointer; min-width:220px;
  transition:border-color 160ms, background 160ms;
}
.search-trigger:hover{ background:#fff}
.search-trigger:hover{ border-color:var(--ink-4)}
.search-trigger .kbd{
  margin-left:auto;
  font-family:var(--mono); font-size:10.5px;
  border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; background:#F5F2E5; color:var(--ink-3);
}
.ver-pill{
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--marine);
  background:#fff; border:1px solid var(--line-2);
  padding:4px 9px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}
.ver-pill .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--or); box-shadow:0 0 0 3px var(--or-soft);
}

/* ═══════════════════════════════════════════════════════════
   SUBNAV (per-page sections) — appears below topbar
   ═══════════════════════════════════════════════════════════ */
.subnav{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:60px; z-index:40;
}
.subnav-row{
  max-width:1320px; margin:0 auto; padding:0 36px;
  height:48px; display:flex; align-items:center; gap:24px;
  font-size:13px;
}
.subnav-row .here{
  display:flex; align-items:center; gap:8px;
  color:var(--ink-3);
}
.subnav-row .here b{ color:var(--ink); font-weight:600}
.subnav-row .anchors{
  display:flex; gap:2px; margin-left:auto;
}
.subnav-row .anchors a{
  padding:6px 11px; border-radius:6px;
  color:var(--ink-3); font-size:12.5px; font-weight:500;
}
.subnav-row .anchors a:hover{ background:#F5F2E5; color:var(--ink)}
.subnav-row .anchors a.on{ color:var(--marine); background:#F5F2E5}

/* ═══════════════════════════════════════════════════════════
   PAGE FRAME
   ═══════════════════════════════════════════════════════════ */
.page{ max-width:1320px; margin:0 auto; padding:48px 36px 120px}
.page-narrow{ max-width:920px; margin:0 auto; padding:48px 36px 120px}

.page-header{ margin-bottom:48px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:var(--or);
}
.page-h1{
  font-family:var(--serif);
  font-size:64px; line-height:1.02; letter-spacing:-.025em;
  font-weight:400; margin:0 0 18px;
  color:var(--ink);
  text-wrap:balance;
}
.page-h1 em{ font-style:italic; color:var(--or); font-weight:400}
.page-lead{
  font-size:19px; line-height:1.55; color:var(--ink-2);
  max-width:720px; text-wrap:pretty;
  font-weight:400;
}

/* sections inside page */
.section{ margin-top:80px; scroll-margin-top:130px}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-bottom:28px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.section-head .l .num{
  font-family:var(--mono); font-size:11px; color:var(--or);
  letter-spacing:.08em; margin-bottom:6px;
  display:block;
}
.section-head .l h2{
  font-family:var(--serif); font-size:32px; line-height:1.1;
  letter-spacing:-.02em; font-weight:400; margin:0; color:var(--ink);
}
.section-head .l h2 em{ font-style:italic; color:var(--or); font-weight:400}
.section-head .r{
  font-size:13.5px; color:var(--ink-3); max-width:340px;
  text-align:right; text-wrap:pretty;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — primary has shimmer on hover
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  border-radius:8px; border:1px solid transparent;
  cursor:pointer;
  transition:transform 120ms var(--ease-out), background 160ms, border-color 160ms, box-shadow 200ms;
  text-decoration:none;
  letter-spacing:-.005em;
}
.btn:active{ transform:translateY(1px)}
.btn .arr{ transition:transform 200ms var(--ease-out)}
.btn:hover .arr{ transform:translateX(2px)}

.btn-primary{
  position:relative; overflow:hidden;
  background:var(--marine); color:var(--creme);
  box-shadow:
    inset 0 1px 0 rgba(244,241,226,.12),
    0 1px 2px rgba(14,22,51,.18),
    0 6px 18px -8px rgba(14,22,51,.4);
}
.btn-primary:hover{ background:var(--marine-2); color:var(--creme)}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(201,149,61,.0) 40%,
    rgba(224,175,84,.55) 50%,
    rgba(201,149,61,.0) 60%,
    transparent 70%);
  transform:translateX(-100%);
  transition:transform 900ms var(--ease-out);
  pointer-events:none;
}
.btn-primary:hover::before{ transform:translateX(100%)}

.btn-gold{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--or-2) 0%, var(--or) 100%);
  color:var(--marine);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(14,22,51,.15),
    0 1px 2px rgba(181,122,15,.2),
    0 6px 16px -8px rgba(201,149,61,.5);
}
.btn-gold:hover{ color:var(--marine)}
.btn-gold::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 900ms var(--ease-out);
}
.btn-gold:hover::before{ transform:translateX(100%)}

.btn-outline{
  background:var(--bg-paper); color:var(--ink);
  border-color:var(--line-2);
}
.btn-outline:hover{ border-color:var(--marine); background:#FBF7E8}

.btn-ghost{ background:transparent; color:var(--ink-2)}
.btn-ghost:hover{ background:#F5F2E5; color:var(--ink)}

.btn-sm{ height:30px; padding:0 11px; font-size:12.5px; border-radius:6px}
.btn-lg{ height:46px; padding:0 22px; font-size:15px; border-radius:9px}

/* ═══════════════════════════════════════════════════════════
   CARDS / TILES
   ═══════════════════════════════════════════════════════════ */
.card{
  background:var(--bg-paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  transition:border-color 200ms, transform 200ms var(--ease-out), box-shadow 200ms;
}
.card.hover:hover{
  border-color:var(--line-3);
  transform:translateY(-2px);
  box-shadow:0 12px 32px -16px rgba(14,22,51,.18);
}
.card-num{
  font-family:var(--mono); font-size:10.5px; color:var(--or);
  letter-spacing:.08em;
}
.card-title{
  font-family:var(--serif); font-size:21px; line-height:1.2;
  font-weight:500; margin:6px 0 8px; color:var(--ink);
  letter-spacing:-.01em;
}
.card-desc{
  font-size:13.5px; line-height:1.55; color:var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHIC HELPERS
   ═══════════════════════════════════════════════════════════ */
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em}
.mono{ font-family:var(--mono)}
.muted{ color:var(--ink-3)}
.faint{ color:var(--ink-4)}
.upper{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer{
  margin-top:120px;
  background:var(--marine);
  color:var(--ink-on-marine);
  border-top:1px solid var(--marine-3);
}
.footer-inner{
  max-width:1320px; margin:0 auto; padding:64px 36px 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
}
.footer h4{
  font-family:var(--sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--or-2); margin:0 0 16px;
}
.footer .col-brand .name{
  font-family:var(--serif); font-size:24px; line-height:1.1;
  font-weight:400; margin-bottom:14px;
}
.footer .col-brand .name em{ font-style:italic; color:var(--or-2)}
.footer .col-brand p{ font-size:13.5px; opacity:.7; max-width:300px; margin:0}
.footer ul{ list-style:none; padding:0; margin:0}
.footer ul li{ margin:9px 0}
.footer ul a{
  color:var(--ink-on-marine); opacity:.75; font-size:13.5px;
  transition:opacity 160ms, color 160ms;
}
.footer ul a:hover{ opacity:1; color:var(--or-2)}
.footer-bottom{
  max-width:1320px; margin:0 auto; padding:18px 36px;
  border-top:1px solid var(--line-marine);
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; opacity:.55;
}
.footer-bottom .l{ display:flex; gap:18px; align-items:center}
.footer-bottom .mono{ font-family:var(--mono); font-size:11px}