/**
 * Theme surface bindings — let Theme Manager vars win over hard-coded chrome colors.
 * FILE_PATH: public/assets/css/theme_surfaces.css
 * Load after site.css / admin.css so these rules can override hard fills.
 */

body {
  color: var(--ink, #12222b);
  background:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--teal, #1f9aa8) 18%, transparent), transparent 55%),
    radial-gradient(900px 400px at 90% 0%, color-mix(in srgb, var(--accent, #c6f36d) 12%, transparent), transparent 50%),
    linear-gradient(180deg, var(--page-bg, #e8eef2) 0%, var(--panel, #f7fafb) 42%, var(--page-bg, #eef3f5) 100%);
}

.site-header {
  background: var(--header-bg, var(--bg, #071218));
  border-bottom: 1px solid var(--chrome-border, rgba(255, 255, 255, 0.08));
}

.brand {
  color: var(--chrome-text, #fff);
}

.brand-mark {
  background: var(--accent, #c6f36d);
  color: var(--on-accent, #102018);
}

.site-nav a {
  color: var(--chrome-muted, #9fe7ef);
}

.site-nav a:hover {
  color: var(--chrome-hover, #fff);
}

.site-nav a.nav-admin,
.nav-admin {
  color: var(--chrome-text, #e8f6f8);
  border: 1px solid var(--chrome-border, rgba(159, 231, 239, 0.35));
  background: var(--chrome-wash, rgba(255, 255, 255, 0.06));
}
.site-nav a.nav-admin:hover,
.nav-admin:hover {
  color: var(--chrome-hover, #fff);
  background: var(--chrome-wash, rgba(255, 255, 255, 0.1));
}

.product-hero-band,
.page-intro,
.site-cta-band {
  color: var(--hero-ink, #e8f6f8);
  border-bottom-color: var(--hero-border, rgba(255, 255, 255, 0.06));
}
.product-hero-band a,
.page-intro a {
  color: var(--hero-link, #9fe7ef);
}
.product-hero-band .meta,
.product-hero-band .muted,
.page-intro .meta,
.page-intro .muted,
.product-tagline,
.page-intro-lead,
.site-cta-band .site-cta-lead,
.site-cta-band .site-cta-eyebrow {
  color: var(--hero-muted, #cfe9ee);
}
.site-cta-band .site-cta-title {
  color: var(--hero-ink, #e8f6f8);
}

.donate-banner-wide,
.donate-banner {
  color: var(--hero-ink, #e8f6f8);
  border-color: var(--hero-border, rgba(255, 255, 255, 0.12));
}
.donate-banner-wide h2,
.donate-banner h1 {
  color: var(--hero-ink, #e8f6f8);
}
.donate-banner-wide p,
.donate-banner p,
.donate-banner .eyebrow {
  color: var(--hero-muted, #cfe9ee);
}

.nav-toggle {
  color: var(--chrome-muted, #9fe7ef);
  border: 1px solid var(--chrome-border, rgba(159, 231, 239, 0.4));
}

.hero:not(.tstp-hero) {
  color: var(--chrome-text, #fff);
}

.hero:not(.tstp-hero) .hero-brand {
  color: var(--chrome-text, #fff);
}

.hero:not(.tstp-hero) .hero-lead {
  color: var(--chrome-muted, #d7eef2);
}

.btn-primary:not(.hero-btn) {
  background: var(--accent, #c6f36d);
  color: var(--on-accent, #13241a);
}

.btn-ghost:not(.hero-btn) {
  border: 1px solid var(--chrome-border, rgba(255, 255, 255, 0.45));
  color: var(--chrome-text, #fff);
  background: transparent;
}

.panel {
  background: var(--panel, #fff);
  color: var(--ink, #12222b);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.12));
}

.product-row,
.donate-pillar,
.content-panel,
.review-card {
  background: var(--card-bg, var(--panel, #fff));
  color: var(--ink, #12222b);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.08));
}

.product-row:hover {
  background: var(--panel, #fff);
  border-color: color-mix(in srgb, var(--teal, #1f9aa8) 45%, var(--line, #cfdce2));
}

.product-row-icon {
  background: linear-gradient(145deg, var(--teal, #1f9aa8), var(--teal-deep, #0e6f7a));
  color: var(--on-accent, #fff);
}

.product-row .btn-quiet {
  background: var(--input-bg, var(--panel, #eef5f7));
  color: var(--ink, #12222b);
  border: 1px solid var(--line, #d5e3e8);
}

.module-table {
  background: var(--panel, #fff);
  color: var(--ink, #12222b);
}

.module-table th,
.module-table td {
  border-bottom: 1px solid var(--line, #e5eef1);
}

.module-table th {
  background: var(--header-bg, #122833);
  color: var(--chrome-text, #dff6f9);
}

.site-footer {
  background: var(--footer-bg, #0b1620);
  color: var(--footer-text, #e8f4f7);
}

.social-link {
  color: var(--footer-link, #fff);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row select,
.form-row textarea,
.form-row input,
.form-row select,
.form-row textarea,
.themes-toolbar input[type="search"] {
  background: var(--input-bg, var(--panel, #fff));
  color: var(--ink, #12222b);
  border: 1px solid var(--line, #cfdce2);
}

.editor-row,
.error-card {
  background: var(--panel, #fff);
  color: var(--ink, #12222b);
  border: 1px solid var(--line, #d7e3e8);
}

.section-band {
  background: color-mix(in srgb, var(--panel, #fff) 70%, transparent);
  border-block: 1px solid var(--line, rgba(18, 34, 43, 0.1));
}

/* Admin chrome */
.admin-side {
  background: var(--header-bg, #071218);
  color: var(--chrome-text, #dff6f9);
  border-right: 1px solid var(--chrome-border, rgba(255, 255, 255, 0.06));
}

.admin-nav-group {
  border: 1px solid var(--chrome-border, rgba(255, 255, 255, 0.06));
  background: var(--chrome-wash, rgba(255, 255, 255, 0.02));
}

.admin-nav-group-toggle {
  color: var(--chrome-muted, #cfe9ee);
}

.admin-nav-group-toggle:hover {
  background: var(--chrome-wash, rgba(255, 255, 255, 0.05));
  color: var(--chrome-hover, #fff);
}

.admin-nav-chevron {
  border-right-color: var(--chrome-muted, #9fe7ef);
  border-bottom-color: var(--chrome-muted, #9fe7ef);
}

.admin-side a {
  color: var(--chrome-muted, #9fe7ef);
}

.admin-side a:hover,
.admin-side a.active {
  background: var(--chrome-wash, rgba(255, 255, 255, 0.08));
  color: var(--chrome-hover, #fff);
}

.admin-popout-btn {
  color: var(--chrome-muted, #9fe7ef) !important;
  border-color: var(--chrome-border, rgba(159, 231, 239, 0.35)) !important;
}

.admin-main .panel {
  background: var(--panel, #fff);
  color: var(--ink, #12222b);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.12));
}

.admin-collapse {
  background: var(--panel, #fff);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.1));
  color: var(--ink, #12222b);
}

.analytics-kpi {
  background: var(--panel, #fff);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.1));
  color: var(--ink, #12222b);
}

.analytics-range a {
  background: var(--input-bg, var(--panel, #fff));
  color: var(--ink, #12222b);
  border: 1px solid var(--line, #d5e3e8);
}

.analytics-range a.active {
  background: var(--teal-deep, #0e6f7a);
  border-color: var(--teal-deep, #0e6f7a);
  color: var(--on-accent, #fff);
}

.analytics-bar-track {
  background: var(--input-bg, #e8f0f3);
  border: 1px solid var(--line, rgba(18, 34, 43, 0.06));
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  body {
    background: linear-gradient(
      180deg,
      var(--page-bg, #e8eef2) 0%,
      var(--panel, #f7fafb) 42%,
      var(--page-bg, #eef3f5) 100%
    );
  }
  .product-row:hover {
    border-color: var(--teal, #1f9aa8);
  }
  .section-band {
    background: var(--panel, #f7fafb);
  }
}