/* =========================================================================
 * Myelin docs — blue-purple theme (clean, restrained)
 *
 * Brand palette
 *   Indigo primary  : #6366F1  (indigo-500)
 *   Indigo deep     : #4F46E5  (indigo-600)
 *   Violet accent   : #8B5CF6  (violet-500)
 *   Slate neutrals  : slate-50 → slate-900
 *
 * Aesthetic target: Linear / Stripe docs — quiet, typographic, no
 * flashy gradients. One accent color used sparingly.
 * ========================================================================= */

/* =========================================================================
 * Light mode  (data-md-color-scheme="default")
 * ========================================================================= */

:root,
[data-md-color-scheme="default"] {
  /* Brand */
  --indigo:        #6366F1;
  --indigo-strong: #4F46E5;
  --indigo-soft:   #EEF2FF;
  --violet:        #8B5CF6;
  --violet-soft:   #F3EEFF;

  /* Slate scale */
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  /* Semantic */
  --amber:      #D97706;
  --red:        #DC2626;

  /* Material primary / accent */
  --md-primary-fg-color:        var(--indigo);
  --md-primary-fg-color--light: var(--violet);
  --md-primary-fg-color--dark:  var(--indigo-strong);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:         var(--violet);
  --md-accent-fg-color--transparent: rgba(99, 102, 241, 0.10);
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  rgba(255, 255, 255, 0.7);

  /* Links */
  --md-typeset-a-color:         var(--indigo-strong);
  --md-typeset-a-color--hover:  var(--violet);

  /* Code */
  --md-code-bg-color:           var(--slate-100);
  --md-code-fg-color:           var(--slate-800);
  --md-code-hl-color:           var(--indigo-soft);

  /* Default fg / bg */
  --md-default-fg-color:        var(--slate-800);
  --md-default-fg-color--light: var(--slate-600);
  --md-default-fg-color--lighter: var(--slate-400);
  --md-default-bg-color:        #ffffff;
  --md-default-bg-color--light: var(--slate-50);

  /* Shadows — subtle */
  --md-shadow-z1: 0 1px 2px rgba(15, 23, 42, 0.04),
                  0 1px 3px rgba(15, 23, 42, 0.06);
  --md-shadow-z2: 0 4px 8px rgba(15, 23, 42, 0.06),
                  0 8px 16px rgba(15, 23, 42, 0.06);
}

/* =========================================================================
 * Dark mode  (data-md-color-scheme="slate")
 * ========================================================================= */

[data-md-color-scheme="slate"] {
  --indigo:        #818CF8;
  --indigo-strong: #6366F1;
  --indigo-soft:   rgba(99, 102, 241, 0.16);
  --violet:        #A78BFA;
  --violet-soft:   rgba(139, 92, 246, 0.16);

  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  --bg-deep:    #0A0E1F;
  --bg:         #0F1428;
  --surface:    #161B33;
  --surface-2:  #1C2240;
  --line:       #252B4A;

  --amber:      #F59E0B;
  --red:        #F87171;

  --md-primary-fg-color:        var(--indigo);
  --md-primary-fg-color--light: var(--violet);
  --md-primary-fg-color--dark:  #A5B4FC;
  --md-primary-bg-color:        var(--bg);
  --md-primary-bg-color--light: var(--surface);

  --md-accent-fg-color:         var(--violet);
  --md-accent-fg-color--transparent: rgba(167, 139, 250, 0.16);
  --md-accent-bg-color:         var(--bg);
  --md-accent-bg-color--light:  var(--surface);

  --md-typeset-a-color:         #A5B4FC;
  --md-typeset-a-color--hover:  var(--violet);

  --md-code-bg-color:           var(--surface);
  --md-code-fg-color:           var(--slate-100);
  --md-code-hl-color:           var(--surface-2);

  --md-default-fg-color:        var(--slate-100);
  --md-default-fg-color--light: var(--slate-300);
  --md-default-fg-color--lighter: var(--slate-400);
  --md-default-bg-color:        var(--bg);
  --md-default-bg-color--light: var(--surface);

  --md-shadow-z1: 0 1px 2px rgba(0, 0, 0, 0.30),
                  0 1px 3px rgba(0, 0, 0, 0.20);
  --md-shadow-z2: 0 4px 8px rgba(0, 0, 0, 0.30),
                  0 8px 24px rgba(0, 0, 0, 0.35);
}

/* =========================================================================
 * Header — flat tinted bar, no gradient soup
 * ========================================================================= */

.md-header {
  background: var(--md-primary-fg-color);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="default"] .md-header {
  background: var(--md-primary-fg-color);
}

.md-header__title,
.md-header__button.md-icon {
  color: #ffffff;
}

.md-header__title:hover {
  color: #ffffff;
  opacity: 0.85;
}

/* =========================================================================
 * Tabs — solid indigo, no gradient
 * ========================================================================= */

.md-tabs {
  background: var(--md-primary-fg-color);
  color: #ffffff;
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: #ffffff;
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs {
  background: var(--md-primary-fg-color);
}

/* =========================================================================
 * Cards & surfaces — restrained
 * ========================================================================= */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-1px);
  border-color: var(--indigo);
  box-shadow: var(--md-shadow-z2);
}

.md-typeset .grid.cards > ul > li > hr {
  border-color: var(--slate-200);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  border-color: var(--line);
  background: var(--surface);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  border-color: var(--indigo);
  box-shadow: var(--md-shadow-z2);
}

/* =========================================================================
 * Admonitions — quiet borders, no fill
 * ========================================================================= */

.md-typeset .admonition,
.md-typeset details {
  border-left: 3px solid var(--indigo);
  background: transparent;
  box-shadow: none;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--indigo);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--violet);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--amber);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--red);
}

.md-typeset .admonition-title {
  background: transparent;
  border-bottom: 1px solid var(--slate-200);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title {
  border-bottom-color: var(--line);
}

/* =========================================================================
 * Code blocks — restrained, slightly tinted
 * ========================================================================= */

.md-typeset code {
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: 4px;
  padding: 0.12em 0.4em;
  font-size: 0.92em;
  font-weight: 500;
}

.md-typeset pre > code {
  border-radius: 8px;
  box-shadow: var(--md-shadow-z1);
  padding: 1rem 1.1rem;
  font-weight: 400;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* =========================================================================
 * Mermaid diagrams — single, mode-aware strategy.
 *
 * The one rule we cannot violate: never put light text on a light
 * background, never put dark text on a dark background.
 *
 * Two surfaces appear in every diagram:
 *   1. Node + edge labels. Nodes use mid-tone pastel fills in light mode
 *      (indigo-300 / violet-300 / slate-300), so dark text reads.
 *      Cluster container fills are now TRANSPARENT — the page background
 *      shows through and cluster labels follow the page text color.
 *   2. Cluster / subgraph containers. They have NO fill; only a stroke
 *      marks the boundary. Cluster labels sit on the page background
 *      and follow the page color scheme.
 *
 * Plus: each layer (L1, L2, off-chain) keeps its own hue family in
 * its classDef so the three layers are visually distinguishable.
 * ========================================================================= */

.mermaid {
  background: transparent;
  font-family: var(--md-text-font, "Inter"), system-ui, sans-serif;
  display: flex;
  justify-content: center;
}

/* --- Node + edge labels: dark slate on pastel node fills.
       These always sit on the node's own fill, so dark text works in
       both light and dark page contexts. --- */

.mermaid .node text,
.mermaid .node tspan,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .edgeLabel tspan,
.mermaid foreignObject div {
  fill: #1E293B !important;
  color: #1E293B !important;
}

/* --- Subgraph / cluster container: TRANSPARENT fill.
       Without this, Mermaid paints the subgraph rect with
       themeVariables.tertiaryColor (a light pastel), and dark-mode
       cluster labels (light text) end up sitting on top of that light
       pastel — invisible. Letting the page show through means the
       cluster label can follow the page text color safely. --- */

.mermaid .cluster rect,
.mermaid .cluster polygon {
  fill: transparent !important;
  stroke-width: 1.5px !important;
}

/* --- Cluster / subgraph labels: follow the page color scheme. --- */

[data-md-color-scheme="default"] .mermaid .cluster-label,
[data-md-color-scheme="default"] .mermaid .cluster-label text,
[data-md-color-scheme="default"] .mermaid .cluster-label tspan {
  fill: #1E293B !important;
  color: #1E293B !important;
}

[data-md-color-scheme="slate"] .mermaid .cluster-label,
[data-md-color-scheme="slate"] .mermaid .cluster-label text,
[data-md-color-scheme="slate"] .mermaid .cluster-label tspan {
  fill: #F1F5F9 !important;
  color: #F1F5F9 !important;
}

/* --- Edge strokes: indigo-600 reads on both mid-tone fills and on the
       page background in both color schemes. --- */

.mermaid .edgePath .path,
.mermaid .flowchart-link,
.mermaid .transition {
  stroke: #4F46E5 !important;
}

/* =========================================================================
 * Tables — clean, readable
 * ========================================================================= */

.md-typeset table:not([class]) {
  font-size: 0.92rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.md-typeset table:not([class]) th {
  background: var(--slate-50);
  color: var(--slate-700);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: var(--line);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--surface);
  color: var(--slate-100);
}

.md-typeset table:not([class]) tr:hover {
  background: var(--slate-50);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background: var(--surface-2);
}

/* =========================================================================
 * Footer — flat, no gradient
 * ========================================================================= */

.md-footer {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
}

[data-md-color-scheme="slate"] .md-footer {
  background: var(--bg-deep);
  border-top-color: var(--line);
}

.md-footer-meta {
  background: var(--slate-100);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background: var(--bg-deep);
}

/* =========================================================================
 * Hero block — clean, generous whitespace, single accent
 * ========================================================================= */

.hero {
  margin: 2rem 0 2.4rem;
  padding: 2.4rem 2rem;
  border-radius: 12px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--slate-200);
}

[data-md-color-scheme="slate"] .hero {
  border-color: var(--line);
  background: var(--surface);
}

.hero h1 {
  margin: 0 0 0.7rem;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--slate-900);
}

[data-md-color-scheme="slate"] .hero h1 {
  color: var(--slate-50);
}

.hero p.lead {
  font-size: 1.05rem;
  color: var(--slate-600);
  margin: 0;
  max-width: 64ch;
  line-height: 1.6;
}

[data-md-color-scheme="slate"] .hero p.lead {
  color: var(--slate-300);
}

.hero .cta {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.hero .cta a.md-button {
  border-radius: 6px;
  font-weight: 500;
}

.hero .cta a.md-button--primary {
  background: var(--indigo-strong);
  border-color: var(--indigo-strong);
}

.hero .cta a.md-button--primary:hover {
  background: var(--indigo);
  border-color: var(--indigo);
}

/* =========================================================================
 * Layer badges (L1 / L2 / off-chain) — used in interactions docs
 * ========================================================================= */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  margin-right: 0.35rem;
  vertical-align: middle;
  font-family: var(--md-code-font), monospace;
}

.badge.l1  { color: #4F46E5; }
.badge.l2  { color: #7C3AED; }
.badge.off { color: #B45309; }
.badge.dev { color: var(--slate-500); }

[data-md-color-scheme="slate"] .badge.l1  { color: #A5B4FC; }
[data-md-color-scheme="slate"] .badge.l2  { color: #C4B5FD; }
[data-md-color-scheme="slate"] .badge.off { color: #FBBF24; }
[data-md-color-scheme="slate"] .badge.dev { color: var(--slate-400); }

/* =========================================================================
 * Subtle scrollbar (dark mode)
 * ========================================================================= */

[data-md-color-scheme="slate"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: rgba(165, 180, 252, 0.20);
  border-radius: 6px;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(165, 180, 252, 0.35);
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================================
 * Selection — match brand
 * ========================================================================= */

::selection {
  background: rgba(99, 102, 241, 0.25);
  color: inherit;
}

[data-md-color-scheme="slate"] ::selection {
  background: rgba(165, 180, 252, 0.30);
}

/* =========================================================================
 * Inline keyboard / UI polish
 * ========================================================================= */

.md-typeset kbd {
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
  font-family: var(--md-code-font), monospace;
}

[data-md-color-scheme="slate"] .md-typeset kbd {
  background: var(--surface);
  color: var(--slate-200);
  border-color: var(--line);
}