/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;500;600;700&display=swap');

/* ============================================================
   PALETTE — Light (warm paper)
   ============================================================ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #1e293b;
  --md-primary-fg-color--light: #475569;
  --md-primary-fg-color--dark:  #0f172a;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffcc;
  --md-accent-fg-color:         #6366f1;
  --md-accent-fg-color--transparent: #6366f120;
  --md-accent-bg-color:         #ffffff;
  --md-default-bg-color:        #f9f8f5;
  --md-default-bg-color--light: #f9f8f5cc;
  --md-default-fg-color:        #1e293b;
  --md-default-fg-color--light: #475569;
  --md-default-fg-color--lighter: #94a3b8;
  --md-default-fg-color--lightest: #cbd5e1;
  --md-code-bg-color:           #f1f0ed;
  --md-code-fg-color:           #1e293b;
  --md-typeset-a-color:         #6366f1;
  --sketch-bg:                  #fefdf8;
  --sketch-border:              #e2e0d8;
  --sketch-shadow:              rgba(0,0,0,0.06);
}

/* ============================================================
   PALETTE — Dark (deep navy)
   ============================================================ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #e2e8f0;
  --md-primary-fg-color--light: #94a3b8;
  --md-primary-fg-color--dark:  #f8fafc;
  --md-primary-bg-color:        #0f172a;
  --md-accent-fg-color:         #818cf8;
  --md-accent-fg-color--transparent: #818cf820;
  --md-default-bg-color:        #0f172a;
  --md-default-fg-color:        #e2e8f0;
  --md-default-fg-color--light: #94a3b8;
  --md-default-fg-color--lighter: #475569;
  --md-default-fg-color--lightest: #334155;
  --md-code-bg-color:           #1e293b;
  --md-code-fg-color:           #e2e8f0;
  --md-typeset-a-color:         #818cf8;
  --sketch-bg:                  #1e293b;
  --sketch-border:              #334155;
  --sketch-shadow:              rgba(0,0,0,0.3);
}

/* ============================================================
   GLOBAL
   ============================================================ */
.md-grid { max-width: 1280px; }

body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

/* ============================================================
   HEADER & NAV
   ============================================================ */
.md-header {
  box-shadow: 0 1px 0 var(--sketch-border);
  backdrop-filter: blur(8px);
}

.md-tabs { border-bottom: 1px solid var(--sketch-border); }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-size: 2.2em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 2px solid var(--sketch-border);
  padding-bottom: .4em;
  margin-top: 2em;
}

.md-typeset h3 { font-weight: 600; }

.md-typeset a { text-underline-offset: 3px; }

/* ============================================================
   CODE BLOCKS
   ============================================================ */
.md-typeset pre {
  border: 1px solid var(--sketch-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--sketch-shadow);
}

.md-typeset code {
  border-radius: 4px;
  font-size: .85em;
  padding: .15em .35em;
  background: var(--md-code-bg-color);
  border: 1px solid var(--sketch-border);
}

.md-typeset pre code { border: none; padding: 0; font-size: .8em; }

/* ============================================================
   ADMONITIONS — redesign
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border: 1.5px solid var(--sketch-border);
  border-left-width: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--sketch-shadow);
  font-size: .9rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  letter-spacing: .01em;
}

/* ============================================================
   TABLES
   ============================================================ */
.md-typeset table:not([class]) {
  border: 1.5px solid var(--sketch-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--sketch-shadow);
  font-size: .88rem;
}

.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover td {
  background: var(--md-accent-fg-color--transparent);
}

/* ============================================================
   MERMAID — sketch effect
   ============================================================ */

/* Container */
.mermaid,
pre.mermaid,
[data-md-type="mermaid"] {
  background: var(--sketch-bg);
  border: 1.5px solid var(--sketch-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5em 0;
  box-shadow: 0 4px 16px var(--sketch-shadow), 3px 3px 0 var(--sketch-border);
  position: relative;
  overflow: visible;
}

/* Notebook corner decoration */
.mermaid::before,
[data-md-type="mermaid"]::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  background: var(--md-default-bg-color);
  border-left: 1.5px solid var(--sketch-border);
  border-bottom: 1.5px solid var(--sketch-border);
  border-radius: 0 10px 0 8px;
}

/* SVG styling */
.mermaid svg,
[data-md-type="mermaid"] svg {
  max-width: 100%;
  font-family: 'Caveat', cursive !important;
}

/* Force Caveat on all Mermaid text */
.mermaid svg text,
.mermaid svg .label,
.mermaid svg .nodeLabel,
.mermaid svg .edgeLabel,
.mermaid svg tspan,
[data-md-type="mermaid"] svg text,
[data-md-type="mermaid"] svg tspan,
[data-md-type="mermaid"] svg .label {
  font-family: 'Caveat', cursive !important;
  font-size: 15px !important;
}

/* Sketch stroke feel */
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node polygon,
.mermaid svg .node path,
[data-md-type="mermaid"] svg .node rect,
[data-md-type="mermaid"] svg .node circle {
  stroke-width: 1.5px;
  filter: url(#sketch-wobble);
}

.mermaid svg path.arrowMarker,
.mermaid svg .edgePath path,
[data-md-type="mermaid"] svg .edgePath path {
  stroke-width: 1.5px;
  filter: url(#sketch-wobble);
}

/* ============================================================
   CONTENT TABS
   ============================================================ */
.md-typeset .tabbed-set .tabbed-labels > label {
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .02em;
}

/* ============================================================
   NAV SIDEBAR
   ============================================================ */
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

/* ============================================================
   FOOTER
   ============================================================ */
.md-footer { border-top: 1px solid var(--sketch-border); }

/* ============================================================
   SEARCH
   ============================================================ */
.md-search__form { border-radius: 8px; border: 1.5px solid var(--sketch-border); }
.md-search__form:focus-within { border-color: var(--md-accent-fg-color); }

/* ============================================================
   HOME PAGE HERO
   ============================================================ */
.hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.hero h1 {
  font-size: 2.8em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: .5rem;
}

.hero p {
  font-size: 1.15rem;
  color: var(--md-default-fg-color--light);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.hero-badges { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--sketch-border);
  background: var(--sketch-bg);
  letter-spacing: .02em;
  color: var(--md-default-fg-color--light);
}

.badge.accent {
  background: var(--md-accent-fg-color--transparent);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.feature-card {
  background: var(--sketch-bg);
  border: 1.5px solid var(--sketch-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 2px 2px 0 var(--sketch-border);
  transition: transform .15s ease, box-shadow .15s ease;
}

.feature-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--sketch-border);
}

.feature-card .icon { font-size: 1.8rem; margin-bottom: .5rem; }
.feature-card h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .3rem; }
.feature-card p { font-size: .83rem; color: var(--md-default-fg-color--light); margin: 0; line-height: 1.5; }