/*
 * RegIntel — shared light-theme override stylesheet.
 *
 * Strategy: every page already defines :root tokens (--accent, --bg, --text,
 * --surface, --border, etc.) for the dark theme. This file overrides those
 * tokens with light-theme values using `!important` on the :root block, so
 * every `var(--token)` reference downstream in the page's own CSS picks up
 * the new value with zero per-page edits.
 *
 * Additional patches below handle elements that the variable swap alone
 * can't fix: dark terminal code windows, neon glow effects, hard-coded
 * syntax-highlighting colors, and font-family swaps from Syne to Fraunces.
 *
 * Load this AFTER the page's own <style> blocks so source order wins for
 * any same-specificity rules. The recommended insertion point is
 * immediately before </head>.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ───────────────────────────────────────────────────────────────────
 * 1. TOKEN OVERRIDES — every variable referenced by the dark theme,
 *    re-bound to the cream/green light palette used by index.html.
 * ─────────────────────────────────────────────────────────────────── */
:root {
  /* Paper-warm backgrounds */
  --bg:               #F8F4ED !important;
  --surface:          #FFFFFF !important;
  --surface2:         #FCFAF5 !important;
  --surface-tinted:   #F1ECE2 !important;
  --code-surface:     #FAF7F0 !important;

  /* Hairlines */
  --border:           rgba(15, 20, 25, 0.08) !important;
  --rule:             rgba(15, 20, 25, 0.08) !important;
  --rule-strong:      rgba(15, 20, 25, 0.16) !important;

  /* Type colors */
  --text:             #1F2933 !important;
  --ink:              #0F1419 !important;
  --muted:            #5B6770 !important;
  --muted-2:          #8593A0 !important;

  /* Accent — deep regulatory green */
  --accent:           #0A6E4A !important;
  --accent2:          #0A6E4A !important;
  --accent-hover:     #085A3D !important;
  --accent-tint:      #E5F0EA !important;
  --accent-rule:      rgba(10, 110, 74, 0.22) !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 2. BASE BODY — undo dark text-on-dark assumptions
 * ─────────────────────────────────────────────────────────────────── */
body {
  background: #F8F4ED !important;
  color: #1F2933 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: #E5F0EA; color: #0F1419; }

a { color: #0A6E4A; }
a:hover { color: #085A3D; }

/* ───────────────────────────────────────────────────────────────────
 * 3. TYPOGRAPHY — Syne (geometric display) gets swapped for Fraunces
 *    (editorial serif). Inter + JetBrains Mono are preserved.
 * ─────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .logo, .stat-num,
.pricing-plan, .pricing-price,
.feature-card h3, .use-case h3,
[class*="title"], [class*="heading"] {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  color: #0F1419 !important;
  letter-spacing: -0.02em !important;
}
.logo { font-weight: 600 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 4. NAV — light backdrop, dark text, green accent buttons
 * ─────────────────────────────────────────────────────────────────── */
nav {
  background: rgba(248, 244, 237, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(15, 20, 25, 0.08) !important;
}
.nav-links a { color: #1F2933 !important; }
.nav-links a:hover { color: #0A6E4A !important; }
.btn-nav {
  background: #0A6E4A !important;
  color: #FFFFFF !important;
}
.btn-nav:hover { background: #085A3D !important; }
.btn-nav-dash {
  background: transparent !important;
  color: #0A6E4A !important;
  border: 1px solid rgba(10, 110, 74, 0.22) !important;
}
.btn-nav-dash:hover { background: #E5F0EA !important; }

/* ───────────────────────────────────────────────────────────────────
 * 5. BUTTONS — strip dark-theme neon glows; keep clean fills
 * ─────────────────────────────────────────────────────────────────── */
.btn-primary, .btn-plan.primary, .btn-cta {
  background: #0A6E4A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border: 1px solid #0A6E4A !important;
}
.btn-primary:hover, .btn-plan.primary:hover, .btn-cta:hover {
  background: #085A3D !important;
  color: #FFFFFF !important;
}
.btn-secondary {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  border: 1px solid rgba(15, 20, 25, 0.16) !important;
}
.btn-secondary:hover { background: #F1ECE2 !important; }
.btn-plan.outline {
  background: transparent !important;
  color: #0A6E4A !important;
  border: 1px solid rgba(10, 110, 74, 0.22) !important;
}
.btn-plan.outline:hover { background: #E5F0EA !important; color: #0A6E4A !important; }

/* ───────────────────────────────────────────────────────────────────
 * 6. NEON / GLOW EFFECTS — remove pulse-orb, big radial glows that
 *    only read on dark, and aggressive box-shadows in accent color
 * ─────────────────────────────────────────────────────────────────── */
.glow-orb,
.hero-glow,
[class*="glow"] { display: none !important; }

* {
  text-shadow: none !important;
}
.btn-primary,
.feature-card,
.pricing-card,
.use-case {
  box-shadow: none !important;
}

/* Pulse animations — keep but use accent green opacity instead of mint */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.logo-dot, .hero-eyebrow-dot, .trust-dot {
  background: #0A6E4A !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 7. CODE WINDOWS — flip dark macOS terminal aesthetic to light card
 * ─────────────────────────────────────────────────────────────────── */
.code-window, .code-card {
  background: #FAF7F0 !important;
  border: 1px solid rgba(15, 20, 25, 0.10) !important;
  box-shadow: 0 1px 0 rgba(15,20,25,0.02), 0 8px 24px -12px rgba(15,20,25,0.08) !important;
}
.code-header, .code-card-head {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(15, 20, 25, 0.10) !important;
  color: #5B6770 !important;
}
.code-tab { color: #5B6770 !important; }

/* macOS traffic-light dots — hide entirely, the metaphor doesn't fit light editorial */
.code-dot { display: none !important; }
/* Replace with a small green dot before the tab label */
.code-header::before, .code-card-head::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px; height: 8px;
  background: #0A6E4A !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

.code-body, .code-card-body {
  background: #FAF7F0 !important;
}
.code-body pre, .code-card-body pre {
  color: #1A1F26 !important;
  background: transparent !important;
}

/* Syntax-highlighting palette — readable on cream */
.c-green, .c-string { color: #0A6E4A !important; }
.c-blue   { color: #2C5282 !important; }
.c-yellow { color: #8B6F1F !important; }
.c-pink   { color: #8B3E2F !important; }
.c-gray   { color: #7A8590 !important; font-style: italic !important; }

/* ───────────────────────────────────────────────────────────────────
 * 8. CARDS / SURFACES — every card gets a clean white background
 * ─────────────────────────────────────────────────────────────────── */
.feature-card,
.use-case,
.pricing-card,
.endpoint-list,
.endpoint-item,
.stat {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 20, 25, 0.08) !important;
}
.feature-card p,
.use-case p,
.pricing-card,
.pricing-features li {
  color: #1F2933 !important;
}
.feature-card:hover,
.use-case:hover,
.pricing-card:hover {
  border-color: rgba(10, 110, 74, 0.22) !important;
  background: #FCFAF5 !important;
}

.pricing-card.featured {
  border: 2px solid #0A6E4A !important;
  background: linear-gradient(180deg, #E5F0EA 0%, #FFFFFF 60%) !important;
}
.pricing-badge {
  background: #0A6E4A !important;
  color: #FFFFFF !important;
}

/* Endpoint method badges */
.endpoint-item .method {
  background: #E5F0EA !important;
  color: #0A6E4A !important;
}
.endpoint-item .method.post {
  background: #FFF1E5 !important;
  color: #8B3E2F !important;
}
.endpoint-item .endpoint-path { color: #0F1419 !important; }
.endpoint-item .endpoint-desc { color: #5B6770 !important; }
.endpoint-item.active,
.endpoint-item:hover { background: #F1ECE2 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 9. STATS / TRUST BAR
 * ─────────────────────────────────────────────────────────────────── */
.stats-wrap, .stats-band, .trust-bar {
  background: #F1ECE2 !important;
  border-top: 1px solid rgba(15, 20, 25, 0.08) !important;
  border-bottom: 1px solid rgba(15, 20, 25, 0.08) !important;
}
.stats { background: rgba(15, 20, 25, 0.08) !important; }
.stat-num { color: #0F1419 !important; }
.stat-label { color: #5B6770 !important; }
.trust-item strong { color: #0F1419 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 10. SOCIAL PROOF
 * ─────────────────────────────────────────────────────────────────── */
.social-proof-label { color: #5B6770 !important; }
.social-proof-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 20, 25, 0.08) !important;
  color: #1F2933 !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 11. SECTION TAGS — was `// dev-style` mint comments;
 *     now small editorial labels with green accent rule
 * ─────────────────────────────────────────────────────────────────── */
.section-tag {
  color: #0A6E4A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding-left: 10px !important;
  border-left: 2px solid #0A6E4A !important;
}

/* Hero badge */
.hero-badge {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 20, 25, 0.08) !important;
  color: #5B6770 !important;
}
.hero-badge span {
  background: #0A6E4A !important;
}
.hero h1 .accent { color: #0A6E4A !important; }
.hero-sub { color: #1F2933 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 12. FAQ / DETAILS BLOCKS
 * ─────────────────────────────────────────────────────────────────── */
details {
  border-top: 1px solid rgba(15, 20, 25, 0.08) !important;
}
details:last-of-type { border-bottom: 1px solid rgba(15, 20, 25, 0.08) !important; }
summary {
  color: #0F1419 !important;
  cursor: pointer;
}
details p { color: #1F2933 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 13. FOOTER
 * ─────────────────────────────────────────────────────────────────── */
footer {
  background: #F1ECE2 !important;
  border-top: 1px solid rgba(15, 20, 25, 0.08) !important;
  color: #5B6770 !important;
}
.footer-links a {
  color: #5B6770 !important;
}
.footer-links a:hover { color: #0A6E4A !important; }
.footer-copy { color: #8593A0 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 14. FORMS (login, get-key, contact, dashboard)
 * ─────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  border: 1px solid rgba(15, 20, 25, 0.16) !important;
  border-radius: 6px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid #0A6E4A !important;
  outline-offset: 1px !important;
  border-color: #0A6E4A !important;
}
label { color: #1F2933 !important; }

/* ───────────────────────────────────────────────────────────────────
 * 15. DOCS-SPECIFIC PATTERNS (docs.html uses .param-table, .alert, etc.)
 * ─────────────────────────────────────────────────────────────────── */
.param-table {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 20, 25, 0.08) !important;
}
.param-table th {
  background: #F1ECE2 !important;
  color: #0F1419 !important;
}
.param-table td {
  background: #FFFFFF !important;
  color: #1F2933 !important;
  border-top: 1px solid rgba(15, 20, 25, 0.08) !important;
}
.param-desc { color: #5B6770 !important; }

.alert {
  background: #E5F0EA !important;
  border-left: 4px solid #0A6E4A !important;
  color: #0F1419 !important;
}
.alert.info { background: #E5F0EA !important; border-left-color: #0A6E4A !important; }
.alert.warning { background: #FFF8E1 !important; border-left-color: #F0B429 !important; color: #5C4A00 !important; }

/* Inline code on light bg */
code:not(pre code) {
  background: #F1ECE2 !important;
  color: #8B3E2F !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.88em !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 16. DASHBOARD-SPECIFIC PATTERNS
 * ─────────────────────────────────────────────────────────────────── */
.dashboard-card,
.usage-row,
.metric-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 20, 25, 0.08) !important;
  color: #1F2933 !important;
}
.metric-num, .metric-value {
  color: #0F1419 !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 17. STATUS PAGE / CHANGELOG / PRIVACY / TERMS — generic prose pages
 * ─────────────────────────────────────────────────────────────────── */
.prose, article, main, .content {
  color: #1F2933 !important;
}
hr {
  border: none !important;
  border-top: 1px solid rgba(15, 20, 25, 0.08) !important;
}

/* ───────────────────────────────────────────────────────────────────
 * 18. INDEX.HTML — already uses the canonical light theme inline;
 *     adding `!important` to its :root would harm nothing. This file
 *     can be loaded on index.html too without breakage.
 * ─────────────────────────────────────────────────────────────────── */