/* FDSA Design System — All Pages
   Dark, sharp, typography-driven. Mechanical oranges on near-black. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0,0&display=swap');

:root {
  --vp-c-bg: #0a0a0a;
  --vp-c-bg-soft: #111;
  --vp-c-bg-mute: #181818;
  --vp-c-bg-alt: #080808;
  --vp-c-bg-elv: #141414;
  --vp-c-divider: #1a1a1a;
  --vp-c-border: #222;
  --vp-c-gutter: #141414;
  --vp-c-text-1: #e8e8e8;
  --vp-c-text-2: #888;
  --vp-c-text-3: #555;
  --vp-c-brand-1: #d95c41;
  --vp-c-brand-2: #e87d2f;
  --vp-c-brand-3: #b8432a;
  --vp-c-brand-soft: rgba(217, 92, 65, 0.08);
  --vp-font-family-base: 'DM Sans', ui-sans-serif, sans-serif;
  --vp-font-family-mono: 'DM Mono', ui-monospace, monospace;
}

/* Light mode (toggle - keep as is, most users see dark) */
:root:not(.dark) {
  --vp-c-bg: #f8f8f5;
  --vp-c-bg-soft: #fff;
  --vp-c-bg-mute: #efeee9;
  --vp-c-bg-alt: #f0efea;
  --vp-c-bg-elv: #fff;
  --vp-c-divider: #dddcd5;
  --vp-c-border: #d0cfc8;
  --vp-c-text-1: #1a1a1a;
  --vp-c-text-2: #555;
  --vp-c-text-3: #888;
  --vp-c-brand-1: #c44a30;
  --vp-c-brand-2: #d95c41;
}

/* Material Icons global */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

/* Base */
body {
  font-family: var(--vp-font-family-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
}

::selection { background: var(--vp-c-brand-1); color: #fff; }

/* === TOP NAV === */
.VPNav {
  border-bottom: 1px solid var(--vp-c-divider) !important;
  background: rgba(10,10,10,0.85) !important;
  backdrop-filter: blur(16px) !important;
}
/* FDSA brand in nav — orange terminal icon */
.VPNavBarTitle .title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #e8e8e8 !important;
}
.VPNavBarTitle .title::before {
  content: 'terminal';
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  color: #d95c41;
}
.VPNavBarTitle .logo {
  display: none !important;
}
/* Nav link hover */
.VPNavBarMenuLink:hover, .VPNavBarMenuLink.active {
  color: var(--vp-c-brand-1) !important;
}

/* === SIDEBAR — FDSA style === */
.VPSidebar {
  background: var(--vp-c-bg-alt) !important;
  border-right: 1px solid var(--vp-c-divider) !important;
  width: 240px !important;
  padding-top: 8px !important;
}
.VPSidebar .item .text {
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.VPSidebar .item .text:hover {
  color: var(--vp-c-brand-1) !important;
}
.VPSidebar .group + .group {
  border-top: 1px solid var(--vp-c-divider) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}
/* Active sidebar item */
.VPSidebar .item.active .text {
  color: var(--vp-c-brand-1) !important;
  font-weight: 600 !important;
}
/* Sidebar link hover bg */
.VPSidebar .item:hover {
  background: transparent !important;
}

/* === CONTENT AREA === */
.VPContent {
  padding-left: 240px;
}
@media (max-width: 768px) {
  .VPContent { padding-left: 0; }
}

/* === DOC PAGES — glass card wrapper === */
.VPDoc:not(.VPDoc--blank) > .container > .content {
  background: rgba(17,17,17,0.5) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
  padding: 0 32px !important;
  overflow: hidden;
}

.vp-doc {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 0 48px;
}

.vp-doc h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 24px !important;
  color: var(--vp-c-text-1) !important;
}

.vp-doc h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  padding-top: 32px !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
  border-top: 1px solid var(--vp-c-divider) !important;
  color: var(--vp-c-text-1) !important;
}

.vp-doc h3 {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  color: var(--vp-c-text-1) !important;
}

.vp-doc p {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--vp-c-text-1) !important;
  margin-bottom: 16px !important;
}

/* Links */
.vp-doc a {
  color: var(--vp-c-brand-1) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.vp-doc a:hover { color: var(--vp-c-brand-2) !important; }

/* Code blocks — glass cards */
.vp-doc div[class*='language-'] {
  border-radius: 10px !important;
  border: 1px solid var(--vp-c-border) !important;
  background: rgba(17,17,17,0.85) !important;
  backdrop-filter: blur(12px) !important;
  margin: 24px 0 !important;
}

.vp-code {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* Inline code */
.vp-doc code {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 0.8125rem !important;
  background: var(--vp-c-bg-mute) !important;
  border: 1px solid var(--vp-c-border) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  color: var(--vp-c-text-1) !important;
}

/* Tables */
.vp-doc table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--vp-c-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.875rem !important;
  margin: 24px 0 !important;
}
.vp-doc th {
  background: var(--vp-c-bg-mute);
  font-weight: 600;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vp-c-text-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--vp-c-border);
}
.vp-doc td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vp-c-divider);
  font-size: 0.875rem !important;
}
.vp-doc tr:last-child td { border-bottom: none; }
.vp-doc tr:hover td { background: var(--vp-c-bg-soft); }

/* Blockquotes */
.vp-doc blockquote {
  border-left: 3px solid var(--vp-c-brand-1) !important;
  background: var(--vp-c-brand-soft) !important;
  padding: 16px 24px !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 24px 0 !important;
}
.vp-doc blockquote p {
  font-size: 0.875rem !important;
  color: var(--vp-c-text-2) !important;
  font-style: italic !important;
}

/* Images */
.vp-doc img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px 0;
  border: 1px solid var(--vp-c-border);
}

/* Lists */
.vp-doc ul, .vp-doc ol {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  padding-left: 1.5em !important;
  margin-bottom: 16px !important;
}
.vp-doc li { margin: 6px 0 !important; }

/* Dividers */
.vp-doc hr {
  border: none;
  border-top: 1px solid var(--vp-c-divider);
  margin: 48px 0;
}

/* Custom blocks (tips, warnings) */
.custom-block {
  border-radius: 10px !important;
  border: 1px solid var(--vp-c-border) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
}
.custom-block.tip {
  border-color: rgba(217,92,65,0.3) !important;
  background: rgba(217,92,65,0.06) !important;
}

/* Footer */
.VPFooter {
  border-top: 1px solid var(--vp-c-divider) !important;
  background: var(--vp-c-bg-alt) !important;
  padding: 24px 0 !important;
}
.VPFooter .message {
  font-size: 13px !important;
  color: var(--vp-c-text-3) !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .vp-doc { padding: 24px 16px; }
  .vp-doc h1 { font-size: 1.75rem !important; }
  .vp-doc h2 { font-size: 1.125rem !important; }
  .vp-doc div[class*='language-'] { margin: 16px 0; }
}

/* Print */
@media print {
  .VPNav, .VPSidebar, .VPFooter { display: none !important; }
}