/* ==========================================================================
   apex-docs.css  — Documentation theme for Apex 1.0.0 (IronPeak Studios)
   - Designed to be loaded AFTER apex.css
   - Ziel: klare, ruhige Dokumentation, responsive, mit vielen Beispiel- & Token-Views
   - Enthält: Sidebar/TOC, Token-Tabellen, Farb- & Typografie-Samples, Code-Styling,
     Komponenten-Galerie, Usage-Hinweise (in Kommentaren).
   ========================================================================== */

/* -------------------------
   Import / Fonts
   ------------------------- */
/* Fonts: match Apex (Orbitron + Inter) + a monospace for code */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Orbitron:wght@500;700&family=Fira+Code:wght@400;700&display=swap');

/* -------------------------
   Docs specific variables
   (These use Apex variables when available; fallbacks ensure standalone usability.)
   ------------------------- */
:root{
  /* NOTE: apex.css defines --color-bg, --color-accent-cyan etc.
     We reference them when present, otherwise fallback values are used. */

  /* Background & surfaces (doc-specific, lighter to improve readability) */
  --docs-bg: color-mix(in srgb, var(--color-bg, #0f172a) 92%, white 8%); /* subtle lift */
  --docs-surface: color-mix(in srgb, var(--color-bg-light, #1e293b) 85%, white 15%);
  --docs-panel: color-mix(in srgb, var(--color-bg-light, #1e293b) 78%, white 22%);
  --docs-ink: var(--color-light, #111827);
  --docs-muted: color-mix(in srgb, var(--color-text-muted, #9ca3af) 60%, #000 20%);

  /* Use the Apex accents if defined */
  --docs-accent: var(--color-accent-cyan, #38bdf8);
  --docs-accent-2: color-mix(in srgb, var(--docs-accent) 70%, #ffffff 30%);
  --docs-warn: var(--color-accent-gold, #facc15);

  /* Spacing / layout */
  --docs-gutter: 24px;
  --docs-sidebar-w: 280px;
  --docs-radius: 12px;
  --docs-transition: 200ms ease;

  /* Code block */
  --docs-code-bg: #0b1220;
  --docs-code-ink: #e6eef8;

  /* Elevation */
  --docs-shadow-sm: 0 6px 20px rgba(4,9,15,0.08);
  --docs-shadow-lg: 0 20px 60px rgba(4,9,15,0.12);
}

/* -------------------------
   Global base for docs (scoped to a .docs-root wrapper recommended)
   ------------------------- */
/* You can avoid global changes by wrapping your docs in <div class="docs-root"> */
.docs-root, body.docs-root {
  background: var(--docs-bg);
  color: var(--docs-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Helpful layout container */
.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) 1fr;
  gap: var(--docs-gutter);
  max-width: 1300px;
  margin: 32px auto;
  padding: 16px;
}

/* -------------------------
   Sidebar / Table of Contents
   ------------------------- */
.docs-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: var(--docs-radius);
  padding: 16px;
  box-shadow: var(--docs-shadow-sm);
  border: 1px solid rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

.docs-side-title{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-family:"Orbitron",sans-serif;
  color:var(--docs-accent);
  margin-bottom:8px;
}
.docs-side-desc{ font-size:.86rem; color:var(--docs-muted); margin-bottom:12px }

/* Sidebar nav links */
.docs-toc { display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.docs-toc a{
  color:var(--docs-ink); text-decoration:none;
  padding:8px 10px; border-radius:8px; display:block;
  transition: background var(--docs-transition), transform var(--docs-transition);
}
.docs-toc a:hover{ background: rgba(0,0,0,0.03); transform: translateX(4px) }
.docs-toc a.active{ background: linear-gradient(90deg, color-mix(in srgb,var(--docs-accent) 20%, transparent), transparent); font-weight:700 }

/* Quick token preview in sidebar */
.docs-token-preview {
  margin-top:12px; display:grid; grid-template-columns: 1fr 1fr; gap:8px;
}
.docs-token {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:8px; border-radius:8px; font-size:0.85rem; text-align:center;
  border:1px solid rgba(0,0,0,0.05);
}

/* -------------------------
   Main content area
   ------------------------- */
.docs-main {
  padding: 8px 0;
}

/* Hero / Intro */
.docs-hero {
  display:flex; flex-direction:column; gap:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: var(--docs-radius);
  padding: 28px;
  box-shadow: var(--docs-shadow-lg);
  border:1px solid rgba(0,0,0,0.05);
}
.docs-hero h1{ margin:0; font-family:"Orbitron",sans-serif; font-size: clamp(1.6rem, 3.8vw, 2.4rem); color:var(--docs-accent) }
.docs-hero p{ margin:0; color:var(--docs-muted) }

/* Section base */
.docs-section {
  margin-top: 28px;
  padding: 20px;
  border-radius: 10px;
  background: white; /* override to white for contrast on docs content */
  color: #0b1220;
  box-shadow: var(--docs-shadow-sm);
  border:1px solid rgba(8,10,14,0.04);
}

/* Headings inside docs */
.docs-h2 { font-family:"Orbitron",sans-serif; font-size:1.2rem; color: var(--docs-accent); margin:0 0 12px 0 }
.docs-p { margin:0 0 12px 0; color: #334155; line-height:1.55 }

/* -------------------------
   Color palette component
   ------------------------- */
.docs-colors {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:stretch;
}
.docs-color-swatch{
  flex: 1 1 160px;
  border-radius:10px;
  padding: 14px;
  display:flex; flex-direction:column; gap:8px;
  color: white;
  min-width: 120px;
  box-shadow: 0 10px 30px rgba(2,6,12,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
.docs-color-swatch .swatch{
  height:72px; border-radius:8px; box-shadow: inset 0 -8px 18px rgba(0,0,0,0.12);
  border:1px solid rgba(255,255,255,0.04);
}
.docs-color-swatch .meta{ font-size:0.85rem; color: rgba(255,255,255,0.92) }
.docs-color-swatch .varname{ font-family: "Fira Code", monospace; font-size:0.82rem; color: rgba(255,255,255,0.85) }

/* usage: in html you can set inline style="--swatch: #38bdf8;" or use var(--color-accent-cyan) */
.docs-color-swatch[data-swatch] { background: linear-gradient(180deg, color-mix(in srgb,var(--swatch, var(--docs-accent)) 12%, #000 6%), var(--swatch, var(--docs-accent))); }
.docs-color-swatch[data-foreground] { color: var(--foreground, #fff); }

/* small helper to display hex text over swatch */
.docs-color-swatch .swatch-label{ font-weight:700; font-size:0.95rem; text-shadow: 0 1px 0 rgba(0,0,0,0.25) }

/* -------------------------
   Typography showcase
   ------------------------- */
.docs-typography {
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start;
}
.docs-typography .type-sample {
  padding: 14px; border-radius: 10px; background: #f8fafc; border:1px solid rgba(11,17,28,0.04);
}
.docs-typography h1.sample { font-family:"Orbitron",sans-serif; font-size: clamp(1.6rem,5vw,2.6rem); margin: 0 0 6px 0; color:#0f172a }
.docs-typography p.sample { font-size: 1rem; color:#334155 }

/* code font note */
.docs-mono-note { font-family: "Fira Code", monospace; background:#0b1220; color:#dbeafe; padding:8px; border-radius:6px; display:inline-block }

/* -------------------------
   Component gallery (cards, buttons, badges)
   ------------------------- */
.docs-components {
  display:flex; flex-direction:column; gap:12px;
}

/* Reuse apex-card styling but adapt for light docs background */
.docs-card {
  background: #ffffff; border-radius: 12px; padding: 18px; border:1px solid rgba(10,12,16,0.04);
  box-shadow: var(--docs-shadow-sm);
}
.docs-card h3 { margin:0 0 8px 0; font-family:"Orbitron",sans-serif }

/* Buttons: visually match Apex but adjusted for docs */
.docs-btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.docs-btn {
  padding: .6rem 1rem; border-radius: 10px; font-weight:700; cursor:pointer; border: none;
  transition: transform var(--docs-transition), box-shadow var(--docs-transition);
}
.docs-btn.primary {
  background: linear-gradient(90deg, var(--docs-accent), var(--docs-accent-2));
  color: #061018; box-shadow: 0 10px 30px rgba(56,219,248,0.08);
}
.docs-btn.primary:hover { transform: translateY(-3px); box-shadow: var(--docs-shadow-lg) }
.docs-btn.secondary {
  background: linear-gradient(90deg, var(--docs-warn), #fde68a);
  color: #0f172a;
}

/* small state badges */
.docs-badge { padding:4px 8px; border-radius:999px; font-size:0.82rem; background:#eef2ff; color:#1e293b; font-weight:700 }

/* -------------------------
   Forms / Inputs / Controls
   ------------------------- */
.docs-form { display:flex; flex-direction:column; gap:12px }
.docs-label { font-weight:600; color:#0f172a; font-size:0.95rem }
.docs-input {
  padding:10px 12px; border-radius:10px; border:1px solid rgba(11,17,28,0.06);
  background: #fff; color:#0b1220; font-size:0.95rem;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.03);
}
.docs-input:focus { outline: none; box-shadow: 0 8px 30px rgba(14,165,233,0.06); border-color: var(--docs-accent) }

/* -------------------------
   Code blocks & inline code
   ------------------------- */
pre.docs-code {
  background: var(--docs-code-bg);
  color: var(--docs-code-ink);
  padding: 16px;
  border-radius: 8px;
  overflow:auto;
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(2,6,12,0.18);
}

/* Inline code */
code.docs-inline {
  background: rgba(11,17,28,0.06);
  padding:.18rem .35rem; border-radius:6px; font-family:"Fira Code",monospace; font-size:0.92em;
}

/* small copy button for code blocks (pure CSS visual; JS needed for copy) */
.docs-code-wrap { position:relative }
.docs-copy-btn {
  position:absolute; right:8px; top:8px; background:rgba(255,255,255,0.06); border:none; color:var(--docs-ink);
  padding:6px 8px; border-radius:6px; font-size:0.85rem; cursor:pointer;
}

/* -------------------------
   Token table (variables & usage)
   ------------------------- */
.docs-token-table {
  width:100%; border-collapse:collapse; font-family:"Fira Code",monospace;
  margin-top:8px;
}
.docs-token-table th, .docs-token-table td {
  text-align:left; padding:10px 12px; border-bottom:1px solid rgba(11,17,28,0.04)
}
.docs-token-table th { background:#f1f5f9; color:#0b1220; font-weight:700 }

/* visual preview for token values */
.docs-token-preview-chip{
  display:inline-block; padding:6px 8px; border-radius:8px; font-weight:700; font-size:0.9rem;
  box-shadow: 0 8px 30px rgba(2,6,12,0.06);
}

/* -------------------------
   Small helpers & utilities for docs
   ------------------------- */
.docs-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.docs-note { background:#f8fafc; padding:12px; border-radius:10px; color:#0f172a; border:1px solid rgba(11,17,28,0.03) }
.docs-callout {
  padding:12px; border-radius:10px; border-left:4px solid var(--docs-accent); background: linear-gradient(90deg, rgba(56,219,248,0.06), rgba(255,255,255,0.02))
}

/* Anchor links beside headings */
.docs-h {
  position:relative;
  scroll-margin-top: 88px; /* for sticky header offset */
}
.docs-h a.anchor {
  position:absolute; left:-24px; top:0; opacity:0; transition:opacity .12s;
  font-family: monospace; color:var(--docs-accent); text-decoration:none;
}
.docs-h:hover a.anchor { opacity:1; left:-32px }

/* -------------------------
   Footer / meta
   ------------------------- */
.docs-footer { margin-top:20px; text-align:center; color:#334155; font-size:0.9rem }

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 980px){
  .docs-layout { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
  .docs-sidebar { position:relative; order:2; top:auto; }
  .docs-main { order:1 }
}

/* -------------------------
   Accessibility & Preferences
   ------------------------- */
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* -------------------------
   Usage tips (CSS comments — copy into docs text)
   ------------------------- */
/*
  USAGE NOTES (copy these code-snippets into your documentation pages):

  1) Load apex.css, then apex-docs.css (apex-docs will extend & style the documentation):
     <link rel="stylesheet" href="apex.css">
     <link rel="stylesheet" href="apex-docs.css">

  2) Page wrapper (recommended):
     <body class="docs-root">
       <div class="docs-layout">
         <aside class="docs-sidebar"> ... </aside>
         <main class="docs-main"> ... </main>
       </div>
     </body>

  3) Color swatch example (in HTML):
     <div class="docs-color-swatch" data-swatch style="--swatch: var(--color-accent-cyan);">
       <div class="swatch"></div>
       <div class="meta">Accent Cyan</div>
       <div class="varname">--color-accent-cyan</div>
     </div>

  4) Token table example:
     <table class="docs-token-table">
       <thead><tr><th>Variable</th><th>Wert</th><th>Preview</th></tr></thead>
       <tbody>
         <tr><td>--color-accent-cyan</td><td>#38bdf8</td><td><span class="docs-token-preview-chip" style="background:var(--color-accent-cyan)">preview</span></td></tr>
       </tbody>
     </table>

  5) Code blocks / copy button:
     <div class="docs-code-wrap">
       <button class="docs-copy-btn">Copy</button>
       <pre class="docs-code"><code> CSS or HTML example </code></pre>
     </div>
    */

/* End of apex-docs.css */