/* ============================================================================
   Revento docs — dark-only theme aligned to Revento Design System (M3-compliant)
   ----------------------------------------------------------------------------
   Surface mapping (verbatim from design system, secondary palette is the
   surface family in dark mode — NOT neutral, by design):

     --md-surface                = secondary-30 #0A3331  (scaffold / page bg)
     --md-surface-container-low  = secondary-25 #093532  (sidebars, floating)
     --md-surface-container      = secondary-35 #0D3B38  (cards, app bar)
     --md-surface-container-high = secondary-40 #103F3C  (elevated, dialogs)
     --md-surface-container-highest = secondary-50 #165049

     --md-on-surface             = neutral-90  #C2D4D3  (~14:1 contrast)
     --md-on-surface-variant     = neutral-variant-80 #B0C4C3 (7.3:1 AA)
     --md-on-surface-faint       = neutral-variant-70 #96A9A8 (~4.9:1 AA)

   App bar uses surface-container per M3 (canonical choice for persistent
   sticky headers — equivalent to AppBar's "on-scroll" state which is the
   default for docs chrome).

   Brand key (#2ED75A primary-70) is reserved for accents, primary actions,
   and the lockup signet — never as chrome background.
   ============================================================================ */

/* ---------- Material variable overrides ---------- */
[data-md-color-scheme="slate"] {
  /* Brand */
  --md-primary-fg-color:        #2ED75A; /* primary-70, brand key */
  --md-primary-fg-color--light: #55E07A; /* primary-80 */
  --md-primary-fg-color--dark:  #1FA642; /* primary-50 */
  --md-accent-fg-color:              #DCA041; /* tertiary-70 */
  --md-accent-fg-color--transparent: rgba(220, 160, 65, 0.12);

  /* Page surface (= --md-surface in design system) */
  --md-default-bg-color:           #0A3331; /* secondary-30 */
  --md-default-fg-color:           #C2D4D3; /* neutral-90, on-surface */
  --md-default-fg-color--light:    #B0C4C3; /* neutral-variant-80, on-surface-variant */
  --md-default-fg-color--lighter:  #96A9A8; /* neutral-variant-70, on-surface-faint */
  --md-default-fg-color--lightest: #627574; /* neutral-variant-50 */

  /* Code surfaces — surface-container-high so they read above body bg */
  --md-code-bg-color: #103F3C; /* secondary-40 */
  --md-code-fg-color: #C2D4D3;

  --md-typeset-a-color: var(--md-primary-fg-color);
}

/* ---------- App bar + tabs (surface-container) ---------- */
.md-header,
.md-tabs {
  background-color: #0D3B38; /* secondary-35 = surface-container */
  color:            #C2D4D3; /* neutral-90 = on-surface */
  box-shadow: 0 0 0.2rem rgba(0,0,0,0.4),
              0 0.2rem 0.4rem rgba(0,0,0,0.3);
}
.md-header__title,
.md-tabs__link {
  color: #C2D4D3;
}
.md-search__input {
  background-color: rgba(194, 212, 211, 0.08);
  color:            #C2D4D3;
}
.md-search__input::placeholder {
  color: rgba(194, 212, 211, 0.55);
}

/* ---------- Sidebar / nav drawer (surface-container-low) ---------- */
.md-sidebar {
  background-color: #093532; /* secondary-25 */
}

/* ---------- Typography polish ---------- */
.md-typeset {
  font-feature-settings: "kern", "liga", "calt";
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Links: subtle dashed underline that solidifies on hover ---------- */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
}
.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* ---------- Inline code: rounded ---------- */
.md-typeset code {
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ---------- Tables: a touch of breathing room ---------- */
.md-typeset table:not([class]) th {
  font-weight: 600;
}

/* ============================================================================
   AI action row — Stripe-style "Build with AI" affordances at the top of
   every content page.
   ============================================================================ */
.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.ai-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(194, 212, 211, 0.18);
  background-color: rgba(194, 212, 211, 0.04);
  color: #C2D4D3;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.ai-actions__btn:hover {
  background-color: rgba(194, 212, 211, 0.08);
  border-color: rgba(194, 212, 211, 0.32);
  border-bottom-color: rgba(194, 212, 211, 0.32) !important; /* override .md-typeset a:hover */
}
.ai-actions__btn svg {
  flex-shrink: 0;
  opacity: 0.8;
}
.ai-actions__btn--primary {
  background-color: rgba(46, 215, 90, 0.10);
  border-color: rgba(46, 215, 90, 0.35);
  color: #2ED75A;
}
.ai-actions__btn--primary:hover {
  background-color: rgba(46, 215, 90, 0.18);
  border-color: rgba(46, 215, 90, 0.55);
  border-bottom-color: rgba(46, 215, 90, 0.55) !important;
}
.ai-actions__btn--copied {
  background-color: rgba(46, 215, 90, 0.22);
  border-color: rgba(46, 215, 90, 0.7);
  color: #55E07A;
}

/* ============================================================================
   Logo lockup
   ============================================================================ */
.revento-lockup {
  height: 28px;
  width: auto;
}
.lockup-signet-primary { fill: #2ED75A; } /* primary-70, brand key */
.lockup-signet-counter { fill: #FFFFFF; }
.lockup-wordmark       { fill: #FFFFFF; }

/* Header logo: smaller than default since the lockup is wider than a signet alone */
.md-header__button.md-logo {
  margin: 0.4rem;
  padding: 0.4rem;
}
.md-header__button.md-logo svg.revento-lockup {
  height: 1.1rem;
  width: auto;
  display: block;
}

/* Nav drawer logo (mobile) — slightly larger in its dedicated header area */
.md-nav__button.md-logo svg.revento-lockup {
  height: 1.5rem;
  width: auto;
  display: block;
}