/* ==========================================================================
   Brand Atlas — Documentation Styles (Luxury Dark)
   ========================================================================== */

/* Luxury dark theme (default) design tokens */
:root{
  --bg:      #1d1f25;  /* ink */
  --fg:      #eef0f4;  /* light text */
  --muted:   #a9b0bd;  /* secondary */
  --line:    #2a2e36;  /* subtle stroke */
  --accent:  #c8a156;  /* gold links/buttons */
  --card:    #222531;  /* panels */
  --stroke:  #303545;  /* borders */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#1d1f25; --fg:#eef0f4; --muted:#a9b0bd; --line:#2a2e36;
    --accent:#c8a156; --card:#222531; --stroke:#303545;
  }
}

/* TRUE black/white when toggled */
html[data-theme='dark']{
  --bg:#000; --fg:#fff; --muted:#cfcfcf; --line:#1a1a1a; --accent:#fff; --card:#000; --stroke:#1a1a1a;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  display:flex;
}

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* Sidebar / TOC */
.sidebar{
  width:280px; max-width:80vw;
  border-right:1px solid var(--stroke);
  padding:20px;
  position:sticky; top:0; height:100vh; overflow:auto;
  background:var(--bg);
}
.brand{ font-weight:800; font-size:1.05rem; margin-bottom:12px; line-height:1.2 }
#toc{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
#toc a{ padding:6px 8px; border-radius:8px; transition:background .15s ease }
#toc a:hover, #toc a.active{ background:rgba(200,161,86,.10) }

/* Search */
.search{ margin:12px 0 }
.search input{
  width:100%; padding:10px 12px; border:1px solid var(--stroke);
  border-radius:10px; background:transparent; color:var(--fg); outline:none;
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:10px; border:1px solid var(--stroke); background:transparent; color:var(--fg); cursor:pointer }
.btn.small{ padding:6px 10px }

/* Content */
.content{ flex:1; min-width:0; padding:24px 40px }
h2{ margin-top:28px } h3{ margin-top:18px }
.lead{ color:var(--muted); margin:0 0 18px }
.section{ padding:28px 0 } .container{ max-width:1100px; margin:0 auto }

code{
  background:rgba(125,125,125,.12); border:1px solid var(--line);
  padding:2px 6px; border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
pre{
  background:rgba(125,125,125,.1); padding:12px; border-radius:10px; overflow:auto; border:1px solid var(--line);
}

/* Media blocks */
figure{ margin:20px 0; border:1px solid var(--stroke); padding:10px; border-radius:12px; background:var(--card) }
figure img{ display:block; max-width:100%; height:auto; border-radius:8px }
figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px }

/* Footer */
.page-foot{ margin:40px 0 0; padding-top:16px; border-top:1px solid var(--stroke); color:var(--muted) }

/* Responsive */
@media (max-width: 980px){
  .sidebar{ display:none }
  .content{ padding:20px }
}

/* Print */
@media print{
  .sidebar, #themeToggle, .search{ display:none !important }
  body{ display:block; color:#000; background:#fff }
  a{ color:#000; text-decoration:underline }
}

/* ---------- Luxury Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(200,161,86,.18), transparent 60%),
    linear-gradient(180deg, rgba(200,161,86,.08), rgba(200,161,86,0) 40%),
    var(--bg);
  border-bottom:1px solid var(--stroke);
  padding:72px 24px 56px;
}
.hero-title{ font:700 44px/1.12 Inter,system-ui; color:#fff; margin:0 0 6px; letter-spacing:.2px }
.hero-sub{ font:500 22px/1.4 Inter,system-ui; color:var(--muted); margin:0 0 22px }
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.hero-badges li{
  color:#fff; background:transparent; border:1px solid rgba(200,161,86,.45);
  border-radius:999px; padding:6px 12px; font:600 13px/1 Inter,system-ui;
}

/* ---------- Video block ---------- */
.video-wrap{ background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:16px; position:relative }
.video{ width:100%; border-radius:10px; outline:none }

/* Play overlay */
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:999px;
  border:2px solid rgba(200,161,86,.9); background:rgba(0,0,0,.45);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.video-play:hover{ transform:translate(-50%,-50%) scale(1.04); background:rgba(0,0,0,.55) }
.video-play:focus{ outline:2px solid var(--accent); outline-offset:4px }
.video-play svg{ pointer-events:none }

/* Hidden utility */
.hidden{ display:none !important }