/*
 * Aeyes-branded overrides bovenop de default Antora UI bundle.
 *
 * Brand-tokens (afgeleid van design-system/src/styles/globals.css):
 *   --primary    #41436a  (deep purple/navy, HSL 238 24% 34%)
 *   --accent     #ff9677  (coral/salmon,    HSL 14 100% 73%)
 *   --bg-soft    #f7f8fc  (off-white)
 *   --text       #0b0d1f  (near-black)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-aeyes-primary: #41436a;
  --color-aeyes-primary-dark: #303253;
  --color-aeyes-accent: #ff9677;
  --color-aeyes-bg-soft: #f7f8fc;
  --color-aeyes-text: #0b0d1f;
  --color-aeyes-muted: #6b7080;
}

html,
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-aeyes-text);
}

/* ---------------------------------------------------------------- *
 * Navbar — donker, brand-kleur, witte tekst
 * ---------------------------------------------------------------- */
.navbar {
  background: var(--color-aeyes-primary);
  color: #fff;
  border-bottom: none;
}

.navbar .navbar-item,
.navbar .navbar-link {
  color: #fff;
}

.navbar .navbar-item:hover,
.navbar .navbar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.navbar .navbar-burger span {
  background: #fff;
}

.ae-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
}

.ae-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--color-aeyes-primary);
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- *
 * Links + accenten
 * ---------------------------------------------------------------- */
a,
.doc a {
  color: var(--color-aeyes-primary);
}

a:hover,
.doc a:hover {
  color: var(--color-aeyes-accent);
}

.nav-menu .nav-link.is-current,
.nav-menu .nav-link:hover {
  color: var(--color-aeyes-primary);
}

.nav-menu .nav-item.is-active > .nav-link {
  font-weight: 600;
  color: var(--color-aeyes-primary);
}

/* ---------------------------------------------------------------- *
 * Headings — Inter, brand-tekstkleur, iets steviger gewicht
 * ---------------------------------------------------------------- */
.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  color: var(--color-aeyes-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc h1 {
  font-size: 32px;
  line-height: 1.2;
  border-bottom: 2px solid var(--color-aeyes-primary);
  padding-bottom: 8px;
}

.doc h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: 2em;
}

.doc h3 {
  font-size: 18px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- *
 * Tabellen — fijnere lijnen, subtiele alt-row
 * ---------------------------------------------------------------- */
.doc table.tableblock {
  border-collapse: collapse;
}

.doc table.tableblock th {
  background: var(--color-aeyes-bg-soft);
  color: var(--color-aeyes-text);
  font-weight: 600;
  border-bottom: 2px solid var(--color-aeyes-primary);
}

.doc table.tableblock td,
.doc table.tableblock th {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
}

/* ---------------------------------------------------------------- *
 * Admonitions (NOTE / TIP / IMPORTANT) — subtiele brand-tint
 * ---------------------------------------------------------------- */
.doc .admonitionblock.note table.tableblock {
  border-left: 3px solid var(--color-aeyes-primary);
  background: var(--color-aeyes-bg-soft);
}

.doc .admonitionblock.tip table.tableblock {
  border-left: 3px solid var(--color-aeyes-accent);
  background: #fff8f5;
}

.doc .admonitionblock.important table.tableblock {
  border-left: 3px solid #d97706;
  background: #fffaeb;
}

/* ---------------------------------------------------------------- *
 * Code blocks — iets warmer, monospace alleen voor code
 * ---------------------------------------------------------------- */
.doc code,
.doc pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.doc code {
  background: var(--color-aeyes-bg-soft);
  border: 1px solid #e5e7eb;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------------------------------------------------------------- *
 * Sidebar / nav — primary-tinten op selectie
 * ---------------------------------------------------------------- */
.nav-container {
  background: var(--color-aeyes-bg-soft);
}

.nav-panel-menu {
  border-right: 1px solid #e5e7eb;
}

/* ---------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------- */
footer.footer {
  border-top: 1px solid #e5e7eb;
  color: var(--color-aeyes-muted);
}

footer.footer a {
  color: var(--color-aeyes-muted);
}

footer.footer a:hover {
  color: var(--color-aeyes-primary);
}