/*
 * RelayCTX Docs — Material for MkDocs theme override
 * Design System v3.4 (June 2026) · source: brand/BRAND-BRIEF.md
 *
 * Product UI system: light-primary, flat (no shadows/gradients), teal-tinted
 * surfaces, teal/indigo on touch points only. Dark = terminal contrast (opt-in).
 * Fonts: Cormorant Garamond (display) · Outfit (body/UI) · JetBrains Mono (code).
 * Material loads Outfit + JetBrains Mono via theme.font; Cormorant is loaded here.
 */
@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:     #f5faf9;
  --rly-panel:       #edf7f5;
  --rly-deep:        #e2f0ec;
  --rly-border:      #daeee9;
  --rly-border-hi:   #b8dbd5;
  --rly-text:        #0f1f1e;
  --rly-text-2:      #446160;
  --rly-text-muted:  #8caaaa;
  --rly-text-bright: #060f0f;
  --rly-teal:        #0d9488;
  --rly-teal-dark:   #0a7268;
  --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);
  --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; }
}