/* ==========================================================
   MintPass Global Theme System
   Applies via: html[data-theme="light"] | html[data-theme="dark"]
   Set by theme.js — respects prefers-color-scheme, persists to localStorage
   ========================================================== */

/* ── Light theme (default) ── */
html[data-theme="light"] {
  /* Core surfaces */
  --t-bg:              #F6F1E8;
  --t-surface:         #EDE8DA;
  --t-surface-alt:     #E5DFCE;
  --t-card:            #E2DBCA;
  --t-muted-panel:     #EAE4D2;

  /* Text */
  --t-text:            #1a1810;
  --t-text-mid:        #3a3620;
  --t-text-dim:        #6a6450;
  --t-text-faint:      #9a9070;

  /* Borders */
  --t-border:          #e2d9c6;
  --t-border-mid:      #ccc0a0;

  /* Accent — brass / warm gold (darkened for WCAG AA 4.5:1 on #F6F1E8) */
  --t-accent:          #796228;
  --t-accent-light:    #a08430;
  --t-accent-on-dark:  #C9A96E;
  --t-accent-bg:       #f5edd6;

  /* Secondary — muted green */
  --t-green:           #2d5a3d;
  --t-green-light:     #3a7050;
  --t-link:            #2d5a3d;

  /* Code */
  --t-code-bg:         #E8E2D6;
  --t-code-text:       #2F2F2B;
  --t-code-border:     #D4CCB8;

  /* ── Proto-nav override tokens ── */
  --pn-parchment:      #F6F1E8;
  --pn-parchment-alt:  #EDE8DA;
  --pn-border:         #e2d9c6;
  --pn-text:           #2a2820;
  --pn-text-dim:       #6a6650;

  /* ── Landing page / global page tokens ── */
  --bg:                #F6F1E8;
  --bg-alt:            #EDE8DA;
  --bg-card:           #E2DBCA;
  --bg-dark:           #2F2F2B;
  --ink:               #1a1810;
  --ink-mid:           #3a3620;
  --ink-dim:           #6a6450;
  --ink-faint:         #9a9070;
  --brass:             #796228;
  --brass-light:       #a08430;
  --brass-on-dark:     #C9A96E;
  --brass-bg:          #f5edd6;
  --green:             #2d5a3d;
  --green-light:       #3a7050;
  --border:            #e2d9c6;
  --border-dark:       #ccc0a0;
  --code-bg:           #E8E2D6;
  --code-text:         #2F2F2B;
  --code-border:       #D4CCB8;

  /* ── Dashboard / verification tokens ── */
  --bg-elevated:       #EDE8DA;
  --bg-input:          #EAE4D2;
  --mint:              #1a7a4d;
  --mint-dim:          rgba(26, 122, 77, 0.13);
  --mint-glow:         rgba(26, 122, 77, 0.08);
  --text:              #2a2820;
  --text-dim:          #6a6650;
  --text-bright:       #1a1810;
  --red:               #c0392b;
  --red-dim:           rgba(192, 57, 43, 0.13);
  --yellow:            #a0680a;
  --yellow-dim:        rgba(160, 104, 10, 0.13);
  --blue:              #1e5a8c;
  --blue-dim:          rgba(30, 90, 140, 0.13);
  --purple:            #6a3a8c;
  --purple-dim:        rgba(106, 58, 140, 0.13);
}

/* ── Dark theme ── */
html[data-theme="dark"] {
  /* Core surfaces */
  --t-bg:              #2F2F2B;
  --t-surface:         #3a3a35;
  --t-surface-alt:     #444440;
  --t-card:            #363632;
  --t-muted-panel:     #383834;

  /* Text (contrast-checked for WCAG AA on #2F2F2B) */
  --t-text:            #E8E2D6;   /* 12.8:1 ✓ */
  --t-text-mid:        #CCC5B4;   /* 9.4:1 ✓ */
  --t-text-dim:        #a8a090;   /* 4.57:1 ✓ — bumped from #9a9080 (4.27:1) */
  --t-text-faint:      #7a7468;   /* 3.1:1 — decorative only (footer, arrows) */

  /* Borders */
  --t-border:          #4a4a44;
  --t-border-mid:      #5a5a52;

  /* Accent — brass on dark */
  --t-accent:          #C9A96E;
  --t-accent-light:    #d4b880;
  --t-accent-on-dark:  #C9A96E;
  --t-accent-bg:       #3a3520;

  /* Secondary — muted green (contrast-checked for WCAG AA on #2F2F2B) */
  --t-green:           #5aa070;   /* used decoratively */
  --t-green-light:     #6cc484;   /* 4.67:1 ✓ — bumped from #5aa070 (4.29:1) */
  --t-link:            #6cc484;   /* 4.67:1 ✓ */

  /* Code */
  --t-code-bg:         #252523;
  --t-code-text:       #E8E2D6;
  --t-code-border:     #444440;

  /* ── Proto-nav override tokens ── */
  --pn-parchment:      #2F2F2B;
  --pn-parchment-alt:  #3a3a35;
  --pn-border:         #4a4a44;
  --pn-text:           #E8E2D6;
  --pn-text-dim:       #a8a090;  /* 4.57:1 on #2F2F2B ✓ */

  /* ── Landing page / global page tokens ── */
  --bg:                #2F2F2B;
  --bg-alt:            #3a3a35;
  --bg-card:           #363632;
  --bg-dark:           #1a1a16;
  --ink:               #E8E2D6;
  --ink-mid:           #CCC5B4;
  --ink-dim:           #a8a090;   /* 4.57:1 ✓ — bumped for WCAG AA */
  --ink-faint:         #7a7468;   /* decorative only */
  --brass:             #C9A96E;
  --brass-light:       #d4b880;
  --brass-on-dark:     #C9A96E;
  --brass-bg:          #3a3520;
  --green:             #5aa070;
  --green-light:       #6cc484;   /* 4.67:1 ✓ — bumped for WCAG AA links */
  --border:            #4a4a44;
  --border-dark:       #5a5a52;
  --code-bg:           #252523;
  --code-text:         #E8E2D6;
  --code-border:       #444440;

  /* ── Dashboard / verification tokens ── */
  --bg-elevated:       #3a3a35;
  --bg-input:          #323230;
  --mint:              #00c47a;
  --mint-dim:          rgba(0, 196, 122, 0.13);
  --mint-glow:         rgba(0, 196, 122, 0.08);
  --text:              #E8E2D6;
  --text-dim:          #a8a090;   /* 4.57:1 ✓ */
  --text-bright:       #F0ECE0;
  --red:               #e05a50;
  --red-dim:           rgba(224, 90, 80, 0.13);
  --yellow:            #d4a020;
  --yellow-dim:        rgba(212, 160, 32, 0.13);
  --blue:              #6ab4e8;
  --blue-dim:          rgba(106, 180, 232, 0.13);
  --purple:            #b07adc;
  --purple-dim:        rgba(176, 122, 220, 0.13);
}

/* ==========================================================
   GLOBAL DARK MODE ELEMENT OVERRIDES
   ========================================================== */

/* ── Body ── */
html[data-theme="dark"] body {
  background: var(--t-bg);
  color: var(--t-text-mid);
}

/* ── proto-page (protocol/docs pages) ── */
html[data-theme="dark"] .proto-page {
  background: var(--t-bg);
  color: var(--t-text);
}

html[data-theme="dark"] .proto-sidebar {
  background: var(--t-surface);
  border-right-color: var(--t-border);
}

/* ── proto-page typography ── */
html[data-theme="dark"] .proto-page-title {
  color: var(--t-text) !important;
}

html[data-theme="dark"] .proto-page-eyebrow {
  color: var(--t-accent) !important;
}

html[data-theme="dark"] .proto-page-intro {
  color: var(--t-text-dim) !important;
}

html[data-theme="dark"] .proto-divider {
  border-top-color: var(--t-border);
}

html[data-theme="dark"] .proto-coming-soon {
  color: var(--t-accent);
  background: var(--t-accent-bg);
  border-color: var(--t-border);
}

/* ── Footer ── */
html[data-theme="dark"] .proto-footer {
  background: var(--t-surface-alt);
  border-top-color: var(--t-border);
}

html[data-theme="dark"] .proto-footer p {
  color: var(--t-text-dim);
}

/* ── NAV: scrolled/static state in dark theme ── */
html[data-theme="dark"] .proto-nav.scrolled,
html[data-theme="dark"] .proto-nav.static {
  background: var(--t-surface);
  border-bottom-color: var(--t-border);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .proto-nav.scrolled .proto-logo,
html[data-theme="dark"] .proto-nav.static .proto-logo {
  color: var(--t-text);
}

html[data-theme="dark"] .proto-nav.scrolled .proto-nav-btn,
html[data-theme="dark"] .proto-nav.scrolled .proto-nav-standalone,
html[data-theme="dark"] .proto-nav.static  .proto-nav-btn,
html[data-theme="dark"] .proto-nav.static  .proto-nav-standalone {
  color: var(--t-text-dim);
}

html[data-theme="dark"] .proto-nav.scrolled .proto-nav-btn:hover,
html[data-theme="dark"] .proto-nav.scrolled .proto-nav-standalone:hover,
html[data-theme="dark"] .proto-nav.static  .proto-nav-btn:hover,
html[data-theme="dark"] .proto-nav.static  .proto-nav-standalone:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--t-text);
}

html[data-theme="dark"] .proto-nav.scrolled .proto-hamburger span,
html[data-theme="dark"] .proto-nav.static  .proto-hamburger span {
  background: var(--t-text);
}

/* ── Dark theme: data-nav="light" page nav (transparent state) ── */
/* Both data-theme and data-nav are on <html>, so combine them on the same element */
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-logo {
  color: var(--t-text);
}
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-nav-btn,
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-nav-standalone {
  color: var(--t-text-dim);
}
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-nav-btn:hover,
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-nav-standalone:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--t-text);
}
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .proto-hamburger span {
  background: var(--t-text);
}

/* ── Dropdown ── */
html[data-theme="dark"] .proto-dropdown {
  background: var(--t-surface);
  border-color: var(--t-border);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 1px 4px  rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .proto-dropdown a {
  color: var(--t-text-mid);
}

html[data-theme="dark"] .proto-dropdown a:hover {
  background: var(--t-surface-alt);
  color: var(--t-text);
}

/* ── Mobile menu ── */
html[data-theme="dark"] .proto-mobile-menu {
  background: var(--t-surface);
  border-bottom-color: var(--t-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .proto-mobile-section {
  border-bottom-color: var(--t-border);
}

html[data-theme="dark"] .proto-mobile-toggle {
  color: var(--t-text);
}

html[data-theme="dark"] .proto-mobile-links a,
html[data-theme="dark"] .proto-mobile-standalone {
  color: var(--t-text-dim);
}

html[data-theme="dark"] .proto-mobile-links a:hover,
html[data-theme="dark"] .proto-mobile-standalone:hover {
  background: var(--t-surface-alt);
  color: var(--t-text);
}

/* ── Logo SVG icon colours ── */
html[data-theme="dark"] .mp-logo-core,
html[data-theme="dark"] .mp-logo-bg-fill { fill: var(--t-accent); }
html[data-theme="dark"] .mp-logo-line    { stroke: var(--t-accent); }
html[data-theme="dark"] .mp-logo-accent  { fill: var(--t-green); }

/* ── Docs page link panels ── */
html[data-theme="dark"] .doc-links {
  border-color: var(--t-border);
}
html[data-theme="dark"] .doc-link {
  background: var(--t-bg);
  border-bottom-color: var(--t-border);
}
html[data-theme="dark"] .doc-link:hover {
  background: var(--t-surface);
}
html[data-theme="dark"] .doc-link-title {
  color: var(--t-text) !important;
}
html[data-theme="dark"] .doc-link-desc {
  color: var(--t-text-dim) !important;
}
html[data-theme="dark"] .doc-link-arrow {
  color: var(--t-text-faint) !important;
}
html[data-theme="dark"] .doc-section-heading {
  color: var(--t-accent) !important;
}

/* ── API docs / import-review / use-cases panels ── */
html[data-theme="dark"] .endpoint-group,
html[data-theme="dark"] .endpoint-card,
html[data-theme="dark"] .use-case-card,
html[data-theme="dark"] .info-card {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
}

html[data-theme="dark"] .endpoint-group h3,
html[data-theme="dark"] .endpoint-card h4,
html[data-theme="dark"] .use-case-card h3 {
  color: var(--t-text) !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] .code-block {
  background: var(--t-code-bg) !important;
  color: var(--t-code-text) !important;
  border-color: var(--t-code-border) !important;
}

/* ==========================================================
   THEME TOGGLE BUTTON
   ========================================================== */

/* ── Desktop toggle ── */
.mp-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  color: rgba(255, 255, 255, 0.82);
}

.mp-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
}

.mp-theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Scrolled / static nav: dark icon */
.proto-nav.scrolled .mp-theme-toggle,
.proto-nav.static   .mp-theme-toggle {
  color: var(--pn-text-dim);
}

.proto-nav.scrolled .mp-theme-toggle:hover,
.proto-nav.static   .mp-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--pn-text);
}

/* Light pages (data-nav="light") — dark icon when nav is transparent */
/* data-nav is on <html>, so [data-nav="light"] is the root element */
[data-nav="light"] .proto-nav:not(.scrolled):not(.static) .mp-theme-toggle {
  color: var(--pn-text-dim);
}
[data-nav="light"] .proto-nav:not(.scrolled):not(.static) .mp-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--pn-text);
}

/* Dark theme + light nav page */
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .mp-theme-toggle {
  color: var(--t-text-dim);
}
html[data-theme="dark"][data-nav="light"] .proto-nav:not(.scrolled):not(.static) .mp-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--t-text);
}

/* Dark theme — toggle icon always readable */
html[data-theme="dark"] .proto-nav.scrolled .mp-theme-toggle,
html[data-theme="dark"] .proto-nav.static   .mp-theme-toggle {
  color: var(--t-text-dim);
}
html[data-theme="dark"] .proto-nav.scrolled .mp-theme-toggle:hover,
html[data-theme="dark"] .proto-nav.static   .mp-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--t-text);
}

/* Dark pages (data-nav="dark") in dark theme — transparent nav state */
html[data-theme="dark"][data-nav="dark"] .proto-nav:not(.scrolled) .mp-theme-toggle {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"][data-nav="dark"] .proto-nav:not(.scrolled) .mp-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

/* ── Mobile toggle row ── */
.mp-theme-toggle-mobile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.5rem;
  background: none;
  border: none;
  border-top: 1px solid var(--pn-border);
  cursor: pointer;
  font-family: 'IBM Plex Sans', 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pn-text);
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
  transition: opacity 0.15s;
  text-align: left;
}
.mp-theme-toggle-mobile:hover { opacity: 0.7; }
.mp-theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--pn-text);
  outline-offset: 2px;
}

html[data-theme="dark"] .mp-theme-toggle-mobile {
  border-top-color: var(--t-border);
  color: var(--t-text);
}

/* ── Toggle icon SVG ── */
.mp-theme-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* ==========================================================
   SMOOTH THEME TRANSITION
   Toggled via JS — class removed after 280ms
   ========================================================== */
html.mp-theme-transitioning,
html.mp-theme-transitioning *,
html.mp-theme-transitioning *::before,
html.mp-theme-transitioning *::after {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.18s ease,
    fill 0.18s ease,
    stroke 0.18s ease !important;
}