/*
 * Relay User Docs — Material for MkDocs theme override
 * Design System v3.5 neutral-first (July 2026)
 * Source of truth: relay-app/packages/ui/tokens.css + relay-app/DESIGN.md
 * (adapted from the internal KB's relay-v34.css)
 *
 * Neutral surfaces — the teal tint is retired; dual-value teal appears on
 * touch points only (#0d9488 light / #2dd4bf dark). Accent split by role:
 * links use accent-text (AA); dark fills use the #0d1514 ink-flip, never
 * white-on-teal. Fonts: Cormorant Garamond (display h1) · Outfit (UI/body) ·
 * JetBrains Mono (code, Codes).
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500&display=swap");

/* ============================================================
   LIGHT — primary (teal-tinted, v3.4 brief palette)
   ============================================================ */
[data-md-color-scheme="relay"] {
  --rly-bg:          #ffffff;
  --rly-surface:     #f7f7f7;
  --rly-panel:       #efefef;
  --rly-deep:        #e4e4e4;
  --rly-border:      #e2e2e2;
  --rly-border-hi:   #cfcfcf;
  --rly-text:        #111111;
  --rly-text-2:      #444444;
  --rly-text-muted:  #616161;
  --rly-text-bright: #111111;
  --rly-teal:        #0d9488;
  --rly-teal-dark:   #0f766e;   /* accent-text role — links, AA */
  --rly-teal-dim:    #ccfbf1;
  --rly-indigo:      #6366f1;
  --rly-indigo-dim:  #ede9fe;
  --rly-success:     #16a34a;
  --rly-warning:     #d97706;
  --rly-error:       #dc2626;

  /* Map onto Material's token surface */
  --md-default-bg-color:            var(--rly-bg);
  --md-default-fg-color:            var(--rly-text);
  --md-default-fg-color--light:     var(--rly-text-2);
  --md-default-fg-color--lighter:   var(--rly-text-muted);
  --md-default-fg-color--lightest:  var(--rly-border);

  --md-primary-fg-color:            var(--rly-teal);
  --md-primary-fg-color--light:     var(--rly-teal);
  --md-primary-fg-color--dark:      var(--rly-teal-dark);
  --md-primary-bg-color:            var(--rly-text);
  --md-primary-bg-color--light:     var(--rly-text-2);

  --md-accent-fg-color:             var(--rly-teal-dark);
  --md-accent-fg-color--transparent: var(--rly-teal-dim);

  --md-typeset-color:               var(--rly-text);
  --md-typeset-a-color:             var(--rly-teal-dark);
  --md-typeset-mark-color:          var(--rly-teal-dim);

  --md-code-fg-color:               var(--rly-text);
  --md-code-bg-color:               var(--rly-panel);
  --md-code-hl-color:               var(--rly-teal-dim);

  --md-footer-bg-color:             var(--rly-surface);
  --md-footer-bg-color--dark:       var(--rly-surface);
  --md-footer-fg-color:             var(--rly-text);
  --md-footer-fg-color--light:      var(--rly-text-2);
  --md-footer-fg-color--lighter:    var(--rly-text-muted);

  /* Flat system — kill Material's elevation shadows */
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;

  color-scheme: light;
}

/* ============================================================
   DARK — terminal contrast (opt-in only)
   ============================================================ */
[data-md-color-scheme="relay-dark"] {
  --rly-bg:          #0d0d0d;
  --rly-surface:     #181818;
  --rly-panel:       #222222;
  --rly-deep:        #2a2a2a;
  --rly-border:      #2a2a2a;
  --rly-border-hi:   #3a3a3a;
  --rly-text:        #e0e0e0;
  --rly-text-2:      #a0a0a0;
  --rly-text-muted:  #606060;
  --rly-text-bright: #f0f0f0;
  --rly-teal:        #2dd4bf;
  --rly-teal-dark:   #5eead4;
  --rly-teal-dim:    rgba(45,212,191,0.14);
  --rly-indigo:      #818cf8;
  --rly-indigo-dim:  rgba(129,140,248,0.14);
  --rly-success:     #4ade80;
  --rly-warning:     #fbbf24;
  --rly-error:       #f87171;

  --md-default-bg-color:            var(--rly-bg);
  --md-default-fg-color:            var(--rly-text);
  --md-default-fg-color--light:     var(--rly-text-2);
  --md-default-fg-color--lighter:   var(--rly-text-muted);
  --md-default-fg-color--lightest:  var(--rly-border);

  --md-primary-fg-color:            var(--rly-teal);
  --md-primary-fg-color--light:     var(--rly-teal);
  --md-primary-fg-color--dark:      var(--rly-teal-dark);
  --md-primary-bg-color:            var(--rly-text);
  --md-primary-bg-color--light:     var(--rly-text-2);

  --md-accent-fg-color:             var(--rly-teal-dark);
  --md-accent-fg-color--transparent: var(--rly-teal-dim);

  --md-typeset-color:               var(--rly-text);
  --md-typeset-a-color:             var(--rly-teal);
  --md-typeset-mark-color:          var(--rly-teal-dim);

  --md-code-fg-color:               var(--rly-text);
  --md-code-bg-color:               var(--rly-panel);
  --md-code-hl-color:               var(--rly-teal-dim);

  --md-footer-bg-color:             var(--rly-surface);
  --md-footer-bg-color--dark:       var(--rly-surface);
  --md-footer-fg-color:             var(--rly-text);
  --md-footer-fg-color--light:      var(--rly-text-2);
  --md-footer-fg-color--lighter:    var(--rly-text-muted);

  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;

  color-scheme: dark;
}

/* ============================================================
   STRUCTURE — flat surfaces, white header (teal is touch-points only)
   ============================================================ */
.md-header {
  background-color: var(--rly-bg);
  color: var(--rly-text);
  box-shadow: none;
  border-bottom: 1px solid var(--rly-border);
}
.md-header--shadow { box-shadow: none; }

.md-tabs {
  background-color: var(--rly-bg);
  color: var(--rly-text);
  border-bottom: 1px solid var(--rly-border);
}

/* Wordmark: RelayCTX, Outfit 600, tight tracking */
.md-header__title,
.md-header__topic {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-search__form {
  background-color: var(--rly-panel);
  box-shadow: none;
  border: 1px solid var(--rly-border);
  border-radius: var(--md-radius, 6px);
}
.md-search__form:hover { background-color: var(--rly-deep); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--rly-border-hi);
}
.md-search__input::placeholder { color: var(--rly-text-muted); }
.md-search__output { box-shadow: none; border: 1px solid var(--rly-border); }

/* Sidebars sit on the surface tint */
.md-sidebar { background-color: transparent; }
.md-nav { font-size: 0.72rem; }
.md-nav__link--active,
.md-nav__link[data-md-state="blur"]:hover,
.md-nav__link:focus,
.md-nav__link:hover { color: var(--rly-teal); }
.md-nav__item--active > .md-nav__link { font-weight: 600; }

/* ============================================================
   TYPOGRAPHY — Cormorant display H1, Outfit subheads, JetBrains code
   ============================================================ */
.md-typeset { font-size: 0.78rem; line-height: 1.7; }

.md-typeset h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--rly-text-bright);
  margin-bottom: 0.6em;
}
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--rly-text-bright);
  letter-spacing: -0.01em;
}
.md-typeset h2 { font-weight: 600; margin-top: 2.2em; }
.md-typeset h3 { font-weight: 500; }

/* Eyebrow-style permalink anchors in teal */
.md-typeset .headerlink { color: var(--rly-border-hi); }
.md-typeset :hover > .headerlink { color: var(--rly-teal); }

/* ============================================================
   CODE — JetBrains Mono, panel bg, 0.5px border, 8px radius, flat
   ============================================================ */
.md-typeset code,
.md-typeset pre > code { font-feature-settings: "liga" 0; }

.md-typeset pre > code,
.md-typeset .highlight {
  border-radius: 8px;
}
.md-typeset .highlight > pre > code,
.md-typeset pre > code {
  background-color: var(--rly-panel);
  border: 0.5px solid var(--rly-border);
}
.md-typeset :not(pre) > code {
  background-color: var(--rly-panel);
  color: var(--rly-text);
  border: 0.5px solid var(--rly-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ============================================================
   LINKS & BUTTONS — teal touch points
   ============================================================ */
.md-typeset a { color: var(--rly-teal); }
.md-typeset a:hover { color: var(--rly-teal-dark); }

.md-typeset .md-button {
  background-color: var(--rly-teal);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 600;
  padding: 0.5em 1em;
  transition: background-color 0.15s;
}
.md-typeset .md-button:hover {
  background-color: var(--rly-teal-dark);
  color: #ffffff;
}
.md-typeset .md-button--primary {
  background-color: var(--rly-teal);
  border: none;
}

/* ============================================================
   ADMONITIONS / TABS — flat, surface bg, teal left accent
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--rly-surface);
  border: 1px solid var(--rly-border);
  border-left: 3px solid var(--rly-teal);
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.74rem;
}
.md-typeset .admonition-title,
.md-typeset summary { background-color: transparent; }
.md-typeset .admonition-title { color: var(--rly-text-bright); font-weight: 600; }

.md-typeset .admonition.note,
.md-typeset .admonition.info { border-left-color: var(--rly-teal); }
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before { background-color: var(--rly-teal); }

.md-typeset .admonition.tip { border-left-color: var(--rly-success); }
.md-typeset .admonition.tip > .admonition-title::before { background-color: var(--rly-success); }

.md-typeset .admonition.warning { border-left-color: var(--rly-warning); }
.md-typeset .admonition.warning > .admonition-title::before { background-color: var(--rly-warning); }

.md-typeset .admonition.danger { border-left-color: var(--rly-error); }
.md-typeset .admonition.danger > .admonition-title::before { background-color: var(--rly-error); }

.md-typeset .tabbed-set > label { color: var(--rly-text-2); }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--rly-teal);
  border-color: var(--rly-teal);
}

/* Tables — flat, hairline borders */
.md-typeset table:not([class]) {
  border: 1px solid var(--rly-border);
  border-radius: 8px;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--rly-panel);
  color: var(--rly-text-bright);
  font-weight: 600;
}

/* ============================================================
   RELAY CODE — canonical inline display (JetBrains Mono, teal, tracked)
   Usage in Markdown:  <span class="relay-code">QNHC2C</span>
   ============================================================ */
.md-typeset .relay-code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rly-teal);
  background: none;
  border: none;
  padding: 0;
}

/* ============================================================
   FOCUS / SELECTION / MOTION
   ============================================================ */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rly-teal-dim);
  border-radius: 4px;
}
::selection { background: var(--rly-teal-dim); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================
   v3.5 DELTA — accent roles & the dark ink-flip
   ============================================================ */

/* Dark fills flip to ink — white-on-teal (1.9:1) is forbidden */
[data-md-color-scheme="relay-dark"] {
  --rly-on-accent: #0d1514;
  --md-primary-bg-color: #0d1514;
}
[data-md-color-scheme="relay-dark"] .md-typeset .md-button--primary {
  color: #0d1514;
  background-color: var(--rly-teal);
  border-color: var(--rly-teal);
}
[data-md-color-scheme="relay"] {
  --rly-on-accent: #ffffff;
}

/* ── Mermaid diagrams: readable inline (natural size + scroll) + click-to-zoom ── */
.mermaid { overflow-x: auto; }
.diagram-zoomable { position: relative; overflow-x: auto; }
.diagram-zoomable svg { display: block; }
.diagram-bar { position: sticky; left: 0; display: flex; justify-content: flex-end; margin-bottom: 6px; }
.diagram-enlarge {
  font: 600 12px/1 var(--md-text-font-family, sans-serif);
  color: var(--md-primary-fg-color, #0d9488);
  background: color-mix(in srgb, var(--md-primary-fg-color, #0d9488) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color, #0d9488) 30%, transparent);
  border-radius: 999px; padding: 5px 12px; cursor: zoom-in;
}
.diagram-enlarge:hover { background: color-mix(in srgb, var(--md-primary-fg-color, #0d9488) 20%, transparent); }
.diagram-lightbox {
  position: fixed; inset: 0; z-index: 10000; background: rgba(8, 12, 12, 0.9);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; overflow: hidden;
}
.diagram-stage { cursor: grab; transform-origin: center center; will-change: transform; }
.diagram-stage:active { cursor: grabbing; }
.diagram-stage svg {
  max-width: none; height: auto; background: #fff; border-radius: 10px; padding: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.diagram-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  font: 500 12px/1 var(--md-text-font-family, sans-serif); color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em; background: rgba(0,0,0,0.4); padding: 8px 14px; border-radius: 999px; pointer-events: none;
}