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

body:not(.app-body) {
  background: var(--color-bg-light);
  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 / dark adapt for navbar variant interoperability */
html[data-theme='light'] body:not(.app-body) {
  background: #ffffff;
}

/* 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; }
.section-alt { background: var(--color-bg-light); }
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 */
.site-footer { background:#ffffff; }
html[data-theme='light'] .site-footer { background:#ffffff; }
.site-footer .muted { color: var(--color-fg-secondary); }