/* Marketing Page Styles & Utilities */
@import url("./tokens.847899e46a91.css");

/*
  Important: Use dark-friendly defaults since :root tokens default to dark.
  Explicitly override for light theme. This prevents white text on light bg
  when no data-theme is set yet (first load before toggle script runs).
*/
body:not(.app-body) {
  background: var(--color-bg-base);
  color: var(--color-fg-primary);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Light theme override */
html[data-theme='light'] body:not(.app-body) {
  background: #ffffff;
  color: var(--color-fg-primary);
}

/* Force readable text in light theme within white cards/sections */
html[data-theme='light'] .bg-white { color: var(--color-fg-primary,#1e252c); }
html[data-theme='light'] .bg-white .text-muted { color: #66737f !important; }

/* Ensure bg-white always has dark text (even in dark theme) */
.bg-white { background-color: #ffffff !important; color: #1e252c !important; }
.bg-white .text-muted { color: #5a6672 !important; }
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6 { color: #1e252c !important; }
.bg-white .lead { color: #5a6672 !important; }

/* Utility classes */
.u-flex-center { display:flex; justify-content:center; align-items:center; }
.u-flex-wrap { flex-wrap:wrap; }
.u-gap-16 { gap:16px; }
.u-gap-24 { gap:24px; }
.u-gap-32 { gap:32px; }
.u-w-280 { width:280px; }
.u-img-cover-200 { width:100%; height:200px; object-fit:cover; }
.max-w-480 { max-width:480px; }
.is-disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Feature Card reuses shared .card-tile base (see app_shell.css) */
.feature-card { border-radius: var(--radius-md, var(--radius)); }
.feature-card h3 { font-size:1rem; margin:0.75rem 0 .4rem; font-weight:600; }
.feature-card p { font-size:.75rem; line-height:1.1rem; margin:0; }

/* Hero Section */
.hero-intro { padding:3rem 0; background: radial-gradient(circle at 30% 20%, var(--color-bg-alt) , var(--color-bg-base) 70%); }
html[data-theme='light'] .hero-intro { background: radial-gradient(circle at 30% 20%, var(--color-bg-base,#ffffff), var(--color-bg-alt,#eef2f5) 70%); }
.hero-intro .lead { max-width:640px; }

/* Sections */
.section-py { padding:2.5rem 0; }
/* In dark: keep alt sections on a darker surface for contrast with light text */
.section-alt { background: var(--color-bg-surface); }
/* In light: alt sections are plain white */
html[data-theme='light'] .section-alt { background:#ffffff; }

/* Modal surface variant */
.modal-dark-surface { background: var(--color-bg-alt); color: var(--color-fg-primary); border:1px solid var(--color-border); }

/* Footer */
/* Dark default pairs dark surface with light text for readability */
.site-footer { background: var(--color-bg-surface); color: var(--color-fg-primary); }
/* Light: white footer and dark text from light token map */
html[data-theme='light'] .site-footer { background:#ffffff; }
.site-footer .muted { color: var(--color-fg-secondary); }

/* Light Theme: Navbar contrast fixes on marketing pages */
html[data-theme='light'] .navbar.navbar-dark.bg-dark {
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-border, #d2d9e1);
}
html[data-theme='light'] .navbar.navbar-dark .navbar-brand,
html[data-theme='light'] .navbar.navbar-dark .nav-link {
  color: #2e3135 !important;
}
html[data-theme='light'] .navbar.navbar-dark .nav-link:hover,
html[data-theme='light'] .navbar.navbar-dark .nav-link:focus {
  color: #111 !important;
}
/* Ensure navbar toggler has visible icon on light background */
html[data-theme='light'] .navbar.navbar-dark .navbar-toggler {
  border-color: var(--color-border, #cfd7df);
}
html[data-theme='light'] .navbar.navbar-dark .navbar-toggler-icon {
  filter: invert(0.9) grayscale(1);
}

/* Light Theme: Outline button legibility on bright surfaces */
html[data-theme='light'] .btn-outline-light {
  color: #2e3135;
  border-color: #cfd7df;
}
html[data-theme='light'] .btn-outline-light:hover,
html[data-theme='light'] .btn-outline-light:focus {
  background: rgba(0,0,0,.05);
  border-color: #b9c3ce;
  color: #111;
}
/* Make secondary outline buttons consistent on white */
html[data-theme='light'] .btn-outline-secondary {
  color: #2e3135;
  border-color: #cfd7df;
}
html[data-theme='light'] .btn-outline-secondary:hover,
html[data-theme='light'] .btn-outline-secondary:focus {
  background: rgba(0,0,0,.05);
  border-color: #b9c3ce;
  color: #111;
}