/* ============================================================
   RTOpacks Trust Site — Visual Identity Override
   Design foundation v1.4 — no hardcoded hex values
   ============================================================ */

/* ============================================================
   Foundation tokens — Dark Mode (default)
   ============================================================ */
:root {
  --color-bg-base:       #0d1117;
  --color-bg-elevated:   #161b22;
  --color-bg-card:       #1c2128;
  --color-bg-hover:      #21262d;

  --color-text-primary:  #e6edf3;
  --color-text-secondary:#8b949e;
  --color-text-disabled: #484f58;

  --color-border:        #30363d;
  --color-border-subtle: #21262d;

  --color-interactive:   #2563eb;
  --color-interactive-hover: #1d4ed8;

  --color-success:       #3fb950;
  --color-warning:       #d29922;
  --color-danger:        #f85149;
}

/* ============================================================
   Light Mode — html[data-theme='light']
   ============================================================ */
html[data-theme="light"] {
  --color-bg-base:       #ffffff;
  --color-bg-elevated:   #f6f8fa;
  --color-bg-card:       #eaeef2;
  --color-bg-hover:      #f3f4f6;

  --color-text-primary:  #1c2128;
  --color-text-secondary:#57606a;
  --color-text-disabled: #8c959f;

  --color-border:        #d0d7de;
  --color-border-subtle: #eaeef2;

  --color-interactive:   #0969da;
  --color-interactive-hover: #0550ae;

  --color-success:       #1a7f37;
  --color-warning:       #9a6700;
  --color-danger:        #cf222e;
}

/* ============================================================
   High Contrast — html[data-contrast='high']
   ============================================================ */
html[data-contrast="high"] {
  --color-text-primary:  #ffffff;
  --color-text-secondary:#c9d1d9;
  --color-border:        #8b949e;
  --color-interactive:   #79c0ff;
  --color-bg-base:       #0d1117;
  --color-bg-elevated:   #161b22;
  --color-bg-card:       #1c2128;
}

html[data-contrast="high"][data-theme="light"] {
  --color-text-primary:  #000000;
  --color-text-secondary:#24292f;
  --color-border:        #24292f;
  --color-interactive:   #0550ae;
  --color-bg-base:       #ffffff;
  --color-bg-elevated:   #f6f8fa;
  --color-bg-card:       #eaeef2;
}

/* ============================================================
   Base typography — self-hosted Inter (no Google Fonts)
   ============================================================ */
body,
.md-typeset {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* ============================================================
   Background stack
   ============================================================ */
.md-main,
.md-content,
body {
  background-color: var(--color-bg-base) !important;
}

.md-sidebar,
.md-sidebar__scrollwrap {
  background-color: var(--color-bg-elevated) !important;
}

.md-header {
  background-color: var(--color-bg-elevated) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none !important;
}

.md-tabs {
  background-color: var(--color-bg-elevated) !important;
  border-bottom: 1px solid var(--color-border);
}

.md-footer {
  background-color: var(--color-bg-elevated) !important;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ============================================================
   Override Material blue with RTOpacks blue
   ============================================================ */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:       var(--color-interactive);
  --md-primary-fg-color--light: var(--color-interactive);
  --md-primary-fg-color--dark:  var(--color-interactive-hover);
  --md-primary-bg-color:       var(--color-bg-base);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:        var(--color-interactive);
}

/* Override Material's default background — must cover all scheme states */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--color-bg-base) !important;
  --md-default-fg-color: var(--color-text-primary) !important;
  --md-default-fg-color--light: var(--color-text-secondary) !important;
  --md-default-fg-color--lighter: var(--color-text-disabled) !important;
  --md-default-fg-color--lightest: var(--color-border-subtle) !important;
  --md-code-bg-color: var(--color-bg-card) !important;
  --md-typeset-color: var(--color-text-primary) !important;
}

/* Force dark background on html element for dark mode */
html:not([data-theme="light"]) {
  background-color: var(--color-bg-base) !important;
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--color-bg-base) !important;
  --md-default-fg-color: var(--color-text-primary) !important;
  --md-default-fg-color--light: var(--color-text-secondary) !important;
  --md-default-fg-color--lighter: var(--color-text-disabled) !important;
  --md-code-bg-color: var(--color-bg-card) !important;
}

/* ============================================================
   Header wordmark
   ============================================================ */
.md-header__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.01em;
}

/* ============================================================
   Navigation
   ============================================================ */
.md-nav__title,
.md-nav__item,
.md-nav__link {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  color: var(--color-text-secondary) !important;
}

.md-nav__link--active,
.md-nav__link:hover {
  color: var(--color-text-primary) !important;
}

.md-nav__link--active {
  font-weight: 600 !important;
  color: var(--color-interactive) !important;
}

.md-tabs__link {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  color: var(--color-text-secondary) !important;
  font-weight: 400;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--color-text-primary) !important;
}

/* ============================================================
   Content typography
   ============================================================ */
.md-typeset h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.md-typeset h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-top: 2rem;
}

.md-typeset h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1.5rem;
}

.md-typeset p,
.md-typeset li {
  color: var(--color-text-secondary) !important;
  line-height: 1.7;
}

.md-typeset strong {
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

.md-typeset a {
  color: var(--color-interactive) !important;
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* ============================================================
   Tables
   ============================================================ */
.md-typeset table {
  border: 1px solid var(--color-border) !important;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.8rem !important;
}

.md-typeset table th {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 12px !important;
}

.md-typeset table td {
  color: var(--color-text-secondary) !important;
  border-bottom: 1px solid var(--color-bg-card) !important;
  padding: 8px 12px !important;
  vertical-align: top;
}

.md-typeset table tr:hover td {
  background-color: var(--color-bg-card) !important;
}

/* ============================================================
   Admonitions
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-interactive) !important;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
}

.md-typeset .note > .admonition-title { border-color: var(--color-interactive) !important; }
.md-typeset .warning > .admonition-title { border-color: var(--color-warning) !important; }
.md-typeset .danger > .admonition-title { border-color: var(--color-danger) !important; }
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title { border-color: var(--color-success) !important; }

/* ============================================================
   Search
   ============================================================ */
.md-search__input {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px;
  font-family: 'Inter', sans-serif !important;
}

.md-search-result {
  background-color: var(--color-bg-elevated) !important;
}

/* ============================================================
   Document control header
   ============================================================ */
.doc-control {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 2rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.doc-control strong {
  color: var(--color-text-primary) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
}

/* ============================================================
   Status badges
   ============================================================ */
.status-live { color: var(--color-success); font-weight: 600; font-size: 0.75rem; }
.status-dev { color: var(--color-warning); font-weight: 600; font-size: 0.75rem; }
.status-planned { color: var(--color-text-secondary); font-weight: 600; font-size: 0.75rem; }

/* ============================================================
   TOC sidebar
   ============================================================ */
.md-nav--secondary .md-nav__title {
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary) !important;
}

.md-nav--secondary .md-nav__link {
  font-size: 0.78rem !important;
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* ============================================================
   Gear panel
   ============================================================ */
.trust-gear-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: opacity 0.2s;
}
.trust-gear-btn:hover { opacity: 0.8; }

.trust-gear-panel {
  position: fixed;
  bottom: 76px;
  right: 24px;
  z-index: 1000;
  width: 240px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: none;
  font-family: 'Inter', sans-serif;
}
.trust-gear-panel.open { display: block; }

.trust-gear-panel label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.trust-gear-panel .theme-row {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.trust-gear-panel .theme-btn {
  flex: 1;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-align: center;
}
.trust-gear-panel .theme-btn.active {
  border-color: var(--color-interactive);
  color: var(--color-interactive);
}

.trust-gear-panel .contrast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trust-gear-panel .contrast-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  position: relative;
  background: var(--color-border);
  transition: background 0.2s;
}
.trust-gear-panel .contrast-toggle.on {
  background: var(--color-interactive);
}
.trust-gear-panel .contrast-toggle::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.trust-gear-panel .contrast-toggle.on::after {
  left: 16px;
}