/* Dev Handoff — docs-style layout. Depende de tokens.css + components.css. */

:root{
  --docs-sidebar-w: 264px;
  --code-bg: #0d1a14;
  --code-text: #E8E4D8;
  --code-border: #23352b;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{overflow-x:hidden;}

/* ---------- sidebar ---------- */
.docs-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--docs-sidebar-w); z-index:70;
  background:var(--green-forest); color:var(--cream); padding:24px 18px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.docs-brand{padding:4px 6px 20px; border-bottom:1px solid rgba(226,201,139,.18);}
.docs-brand img{width:100%; max-width:170px;}
.docs-brand .kicker{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:14px;}
.docs-nav{padding:16px 0; flex:1;}
.docs-nav .group-label{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(226,201,139,.55); margin:18px 10px 8px;}
.docs-nav .group-label:first-child{margin-top:0;}
.docs-nav a{
  display:block; padding:7px 10px; border-radius:9px; font-size:13px;
  color:rgba(245,242,236,.68); transition:background .15s ease, color .15s ease;
}
.docs-nav a:hover{color:var(--cream); background:rgba(255,255,255,.06);}
.docs-nav a.active{color:var(--cream); background:rgba(255,255,255,.09); font-weight:700;}
.docs-foot{padding:16px 10px 0; border-top:1px solid rgba(226,201,139,.18); font-size:10.5px; color:rgba(245,242,236,.48);}

/* ---------- main ---------- */
.docs-main{margin-left:var(--docs-sidebar-w); max-width:920px; padding:56px 56px 120px;}
.docs-hero{margin-bottom:56px;}
.docs-hero .eyebrow{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:10px;}
.docs-hero .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;}
.docs-hero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,44px); color:var(--green-forest); margin-top:14px; line-height:1.15;}
.docs-hero p{font-size:16px; color:var(--text-muted); max-width:62ch; margin-top:14px; line-height:1.6;}

.docs-section{padding:48px 0; border-bottom:1px solid var(--line);}
.docs-section:last-child{border-bottom:none;}
.docs-section h2{font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--green-forest); margin-bottom:10px;}
.docs-section .lead{color:var(--text-muted); font-size:14.5px; max-width:70ch; margin-bottom:24px; line-height:1.65;}
.docs-section h3{font-family:var(--font-sans); font-weight:800; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-deep); margin:28px 0 12px;}
.docs-section h3:first-of-type{margin-top:0;}
.docs-section p{font-size:14.5px; margin-bottom:10px;}

/* ---------- code blocks ---------- */
.code-block{
  position:relative; background:var(--code-bg); border:1px solid var(--code-border);
  border-radius:14px; margin:14px 0; overflow:hidden;
}
.code-block pre{margin:0; padding:20px 22px; overflow-x:auto; font-family:ui-monospace,Consolas,monospace; font-size:12.8px; line-height:1.65; color:var(--code-text);}
.code-block .copy-btn{
  position:absolute; top:10px; right:10px; padding:6px 12px; font-size:11px; font-weight:700;
  color:var(--gold-light); background:rgba(255,255,255,.06); border:1px solid rgba(226,201,139,.25);
  border-radius:8px; transition:background .15s ease;
}
.code-block .copy-btn:hover{background:rgba(255,255,255,.12);}
.code-block .copy-btn.copied{color:var(--cream); background:var(--gold-deep); border-color:var(--gold-deep);}
.code-block .filename{
  padding:9px 16px; font-size:11px; color:rgba(232,228,216,.5); border-bottom:1px solid var(--code-border);
  font-family:ui-monospace,Consolas,monospace;
}

/* token/comment highlight, done manually via spans (no highlighter lib) */
.tok-c{color:#7A9A88;} /* comentário */
.tok-p{color:var(--gold-light);} /* propriedade */
.tok-v{color:#E2C98B;} /* valor / variável */
.tok-s{color:#C9DCC4;} /* string/seletor */

/* ---------- swatch grid (copy hex) ---------- */
.tok-swatches{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0;}
@media(min-width:640px){.tok-swatches{grid-template-columns:repeat(4,1fr);}}
.tok-swatch{
  border:0; border-radius:12px; padding:16px; text-align:left; cursor:pointer;
  min-height:88px; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .15s ease, box-shadow .15s ease; position:relative;
}
.tok-swatch:hover{transform:translateY(-3px); box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(0,0,0,.08);}
.tok-swatch strong{font-size:12.5px;}
.tok-swatch span{font-size:10.5px; display:block; margin-top:2px; font-family:ui-monospace,Consolas,monospace;}
.tok-swatch .hint{position:absolute; top:10px; right:12px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; opacity:.6;}

/* ---------- token table ---------- */
.tok-table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13px;}
.tok-table th,.tok-table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);}
.tok-table th{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep);}
.tok-table code{font-family:ui-monospace,Consolas,monospace; font-size:12px; background:rgba(198,161,90,.12); padding:2px 6px; border-radius:5px;}
.tw{overflow-x:auto; border-radius:10px;}

/* ---------- do/dont ---------- */
.dd-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px;}
@media(min-width:640px){.dd-grid{grid-template-columns:1fr 1fr;}}
.dd{border-radius:var(--radius-lg); padding:20px; border:1px solid var(--line);}
.dd-do{background:rgba(110,127,107,.1);}
.dd-dont{background:rgba(169,80,61,.08);}
.dd h4{font-family:var(--font-sans); font-size:13px; font-weight:800; margin-bottom:10px;}
.dd-do h4{color:#3D5A4C;}
.dd-dont h4{color:var(--error);}
.dd ul{display:flex; flex-direction:column; gap:8px;}
.dd li{font-size:13px; line-height:1.5; padding-left:18px; position:relative;}
.dd li::before{content:"";position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--gold); transform:rotate(45deg);}

/* ---------- component preview stage ---------- */
.preview-stage{
  background:var(--cream-white); border:1px solid var(--line); border-radius:16px;
  padding:28px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:14px 0 0;
}
.preview-stage.dark-stage{background:var(--green-forest);}
.preview-stage.column{flex-direction:column; align-items:stretch; max-width:420px;}

/* ---------- asset table ---------- */
.asset-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line);}
.asset-row:first-child{border-top:none;}
.asset-row img{width:56px; height:56px; object-fit:contain; border-radius:10px; background:var(--cream); flex-shrink:0;}
.asset-row img.on-dark{background:var(--green-forest);}
.asset-row .meta strong{display:block; font-size:13.5px;}
.asset-row .meta code{font-size:11.5px; color:var(--text-muted);}
.asset-row .meta p{font-size:12.5px; color:var(--text-muted); margin-top:3px;}

/* ---------- checklist ---------- */
.impl-checklist{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.impl-checklist .item{display:flex; gap:10px; align-items:flex-start; font-size:14px;}
.impl-checklist .box{flex-shrink:0; width:18px; height:18px; border:2px solid var(--gold-deep); border-radius:5px; margin-top:2px;}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:200;
  background:var(--green-forest); color:var(--gold-light); font-size:13px; font-weight:700;
  padding:11px 20px; border-radius:100px; opacity:0; pointer-events:none; transition:.22s ease;
  box-shadow:0 14px 32px rgba(0,0,0,.3);
}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ---------- mobile ---------- */
.docs-menu-btn{display:none; position:fixed; top:16px; left:16px; z-index:80; width:42px; height:42px;
  border-radius:10px; background:var(--green-forest); color:var(--cream); align-items:center; justify-content:center; font-size:16px;}
.docs-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:65;}
@media(max-width:900px){
  .docs-sidebar{transform:translateX(-100%); width:280px; transition:transform .25s ease; box-shadow:0 0 60px rgba(0,0,0,.3);}
  body.menu-open .docs-sidebar{transform:translateX(0);}
  body.menu-open .docs-scrim{display:block;}
  body.menu-open{overflow:hidden;}
  .docs-menu-btn{display:flex;}
  .docs-main{margin-left:0; padding:88px 22px 80px;}
  .tok-swatches{grid-template-columns:repeat(2,1fr);}
}