/* ============================================================
   Legacy Bridge CSS — Dark Tailwind → Light Theme
   Add this to existing pages to convert them to the new design.
   Works alongside Tailwind utility classes.
   ============================================================ */

/* ---------- Brand CSS Variables ---------- */
:root {
  --color-brand: #0d9488;
  --color-brand-light: #ccfbf1;
  --color-brand-dark: #0f766e;
  --color-brand-50: #f0fdfa;
  --color-brand-100: #ccfbf1;
  --color-brand-600: #0d9488;
  --color-brand-700: #0f766e;
  --color-brand-800: #115e59;

  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;

  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;

  --color-border: #e2e8f0;

  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- Override Dark Background ---------- */
html, body {
  background: #ffffff !important;
  color: var(--color-text) !important;
}

/* ---------- Typography ---------- */
body {
  font-family: var(--font-body) !important;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

/* ---------- Override Dark Text Classes ---------- */
.text-white { color: var(--color-text) !important; }
.text-gray-100, .text-gray-200 { color: var(--color-text) !important; }
.text-gray-300, .text-gray-400, .text-gray-500 { color: var(--color-text-secondary) !important; }

/* ---------- Override Dark Background Classes ---------- */
[style*="background: #0D1117"],
[style*="background:#0D1117"],
[style*="background-color: #0D1117"] {
  background: #ffffff !important;
}

.bg-gray-900, .bg-gray-800, .bg-gray-950 { background: var(--color-bg) !important; }

/* ---------- Override Glass Effects for Light Theme ---------- */
.glass {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--color-border) !important;
}

.glass-light {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
}

/* ---------- Override Gradient CTA ---------- */
.gradient-cta, .gradient-blue-purple, .gradient-hero {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%) !important;
  color: #fff !important;
}
.gradient-cta *, .gradient-blue-purple *, .gradient-hero * {
  color: #fff !important;
}

/* ---------- Override Buttons ---------- */
.btn-primary {
  background: var(--color-brand) !important;
  color: #fff !important;
  border-radius: 6px !important;
}
.btn-primary:hover {
  background: var(--color-brand-dark) !important;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.25) !important;
}

.btn-secondary {
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
  background: transparent !important;
}
.btn-secondary:hover {
  background: var(--color-brand-50) !important;
}

/* ---------- Override Border Colors ---------- */
.border-gray-700, .border-gray-800 { border-color: var(--color-border) !important; }

/* ---------- Override Section Line ---------- */
.section-header-line {
  background: var(--color-brand) !important;
}

/* ---------- Card Overrides ---------- */
.glass, .glass-light {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

/* ---------- Code Blocks ---------- */
code, pre {
  background: var(--color-bg-muted) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* ---------- Links ---------- */
a:not(.btn-primary):not(.btn-secondary):not(.nav__link):not(.nav__cta):not(.footer__links a) {
  color: var(--color-brand);
}

/* ---------- Spacer for Fixed Nav ---------- */
body > div#navbar + *, body > #navbar + * {
  margin-top: 72px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  body > div#navbar + *, body > #navbar + * {
    margin-top: 64px;
  }
}

/* ---------- Google Fonts Loader ---------- */
/* Legacy pages load Inter; inject the new fonts too */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');