/* Watchtower theme — unifies the site's aesthetic with the home page.
 *
 * Loaded AFTER global.css so it overrides the light/indigo palette with
 * the dark/green Watchtower palette + editorial typography (Instrument
 * Serif + Inter Tight + JetBrains Mono) used on index.md.
 *
 * Strategy: remap the token layer and rewrite the most-used components
 * (.acp-card, .acp-btn, .acp-hero-h1, .acp-section-title, .acp-prose,
 * .acp-table, etc.) in Watchtower grammar. Page markup stays the same.
 */

:root {
  /* Watchtower palette */
  --bg: #0b0d10;
  --bg-1: #0f1216;
  --bg-2: #151920;
  --bg-3: #1b2029;
  --line: #20252d;
  --line-2: #2a3039;
  --line-3: #363d48;
  --fg: #e6e8ec;
  --fg-2: #a9b0bb;
  --fg-3: #6b737f;
  --fg-4: #464d57;
  --accent: oklch(0.78 0.16 148);
  --warn: oklch(0.82 0.16 78);
  --deny: oklch(0.70 0.20 24);
  --chain: oklch(0.72 0.17 290);
  --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --serif: 'Instrument Serif', ui-serif, Georgia, serif;

  /* Remap legacy tokens to Watchtower equivalents so existing inline
     styles that use var(--color-*) get the new palette automatically. */
  --color-bg: var(--bg);
  --color-surface: var(--bg-1);
  --color-border: var(--line);
  --color-text-primary: var(--fg);
  --color-text-secondary: var(--fg-2);
  --color-text-muted: var(--fg-3);
  --color-text-faint: var(--fg-3);
  --color-accent: var(--accent);
  --color-accent-light: color-mix(in oklch, var(--accent) 10%, transparent);
  --acp-border: var(--line);
  --acp-border-strong: var(--line-3);
  --acp-text: var(--fg);
}

html, body {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--sans);
}

/* ─── Typography overrides ────────────────────────────────────────── */

.acp-hero-h1 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--fg);
}
.acp-hero-h1 em { font-style: italic; color: var(--fg-2); }

.acp-section-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--fg);
}
.acp-section-title em { color: var(--fg-2); font-style: italic; }

.acp-subtitle {
  color: var(--fg-2);
  font-family: var(--sans);
}

.acp-muted { color: var(--fg-3); }
.acp-faint { color: var(--fg-4); }

/* Prose (blog posts, docs) */
.acp-prose {
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
}
.acp-prose h1, .acp-prose h2, .acp-prose h3, .acp-prose h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.acp-prose h1 { font-size: clamp(28px, 3vw, 36px); }
.acp-prose h2 { font-size: clamp(22px, 2.4vw, 28px); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-top: 48px; }
.acp-prose h3 { font-size: 20px; margin-top: 32px; }
.acp-prose p { color: var(--fg); }
.acp-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  transition: border-color 120ms;
}
.acp-prose a:hover { border-color: var(--accent); }
.acp-prose strong { color: var(--fg); }
.acp-prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-2);
}
.acp-prose pre {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
}
.acp-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg);
}
.acp-prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  color: var(--fg-2);
  margin-left: 0;
}
.acp-prose ul, .acp-prose ol { color: var(--fg); }
.acp-prose table {
  font-family: var(--sans);
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
}
.acp-prose table th, .acp-prose table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.acp-prose table th {
  background: var(--bg-2);
  color: var(--fg-2);
  font-weight: 600;
  font-size: 13px;
}
.acp-prose table tr:last-child td { border-bottom: none; }
.acp-prose hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

/* ─── Cards ──────────────────────────────────────────────────────── */

.acp-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}

.acp-card-pad { padding: 28px; }

.acp-linkcard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  box-shadow: none;
  text-decoration: none;
  transition: border-color 160ms, transform 160ms;
}
.acp-linkcard:hover {
  border-color: var(--line-3);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.acp-linkcard-title { color: var(--fg); font-weight: 600; }
.acp-linkcard-desc { color: var(--fg-2); }
.acp-linkcard-source { color: var(--fg-3); font-family: var(--mono); font-size: 11px; }

/* ─── Buttons ────────────────────────────────────────────────────── */

.acp-btn {
  font-family: var(--sans);
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 120ms, background 120ms, border-color 120ms;
}
.acp-btn-primary {
  background: var(--fg) !important;
  color: var(--bg) !important;
  border: none !important;
}
.acp-btn-primary:hover { opacity: 0.92; }
.acp-btn-ghost {
  background: transparent !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--line-2) !important;
}
.acp-btn-ghost:hover {
  color: var(--fg) !important;
  border-color: var(--line-3) !important;
}

/* ─── Section + container ────────────────────────────────────────── */

.acp-section { padding: 64px 0; }
@media (max-width: 900px) { .acp-section { padding: 48px 0; } }

/* ─── Tag pills (used on blog + series pages) ────────────────────── */

.acp-tag-pill {
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.acp-tag-btn {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--fg-3);
}
.acp-tag-btn:hover {
  color: var(--fg);
  border-color: var(--line-3);
}
.acp-tag-btn.acp-tag-active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* ─── Tables (outside prose, e.g. benchmark page) ────────────────── */

.acp-table {
  font-family: var(--sans);
  color: var(--fg);
}
.acp-table th, .acp-table td {
  border-bottom: 1px solid var(--line);
}
.acp-table th {
  color: var(--fg-2);
  font-weight: 600;
  background: var(--bg-2);
}
.acp-table-wrap { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; }

/* ─── Header (desktop) — Watchtower nav style ────────────────────── */

.acp-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 16px 40px;
  font-family: var(--mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.acp-brand {
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.acp-brand::before {
  content: "A";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--fg);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}
.acp-header nav {
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.acp-header .acp-btn-ghost {
  color: var(--fg-2) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.acp-header .acp-btn-ghost:hover {
  color: var(--fg) !important;
  background: transparent !important;
}
.acp-header .acp-btn-primary {
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 14px;
  background: var(--fg) !important;
  color: var(--bg) !important;
  border: none !important;
  margin-left: 6px;
}

/* Status pill + sign in link (right side) */
.acp-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 0 8px;
}
.acp-nav-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
}
.acp-nav-signin {
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
}
.acp-nav-signin:hover { color: var(--fg); }

/* Watchtower-styled dropdown menus */
.acp-nav-dropdown-menu {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
}
.acp-nav-dropdown-menu a {
  font-family: var(--sans);
  color: var(--fg-2);
}
.acp-nav-dropdown-menu a:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.acp-nav-dropdown-section-title {
  color: var(--fg-4);
  font-family: var(--mono);
}

/* ─── Footer ─────────────────────────────────────────────────────── */

.acp-footer, footer.acp-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-family: var(--sans);
  padding: 40px;
}
.acp-footer a { color: var(--fg-2); }
.acp-footer a:hover { color: var(--fg); }

/* ─── Miscellaneous fixes for common patterns ────────────────────── */

/* Eyebrow / kicker labels from integrations/docs/frameworks pages */
.acp-integ-label {
  background: color-mix(in oklch, var(--accent) 12%, transparent) !important;
  color: var(--accent) !important;
  font-family: var(--mono);
}

/* Grid card items on integrations/docs (the square-bullet ones) */
.acp-integ-gov-item, .acp-integ-item {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
}
.acp-integ-gov-item:hover, .acp-integ-item:hover {
  border-color: var(--line-3) !important;
}
.acp-integ-gov-title { color: var(--fg) !important; }
.acp-integ-item strong { color: var(--fg) !important; }

/* CTA card — prominent but not jarring */
.acp-cta-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 48px;
}
@media (max-width: 640px) { .acp-cta-card { padding: 32px 24px; } }

/* Inputs */
input, textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--sans);
}
input:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* Series card (blog index) */
.acp-series-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
}
.acp-series-card:hover { border-color: var(--line-3) !important; }
.acp-series-eyebrow { color: var(--accent); font-family: var(--mono); }
.acp-series-title { color: var(--fg); }
.acp-series-desc { color: var(--fg-2); }
.acp-series-count { color: var(--accent); font-family: var(--mono); }

/* Dropdown sticky-first-column highlight color — dark theme */
.acp-prose table th:first-child,
.acp-prose table td:first-child,
.acp-table th:first-child,
.acp-table td:first-child {
  background: var(--bg) !important;
}