/* BackupPSA charcoal and dollar-bill green theme. style.css owns layout; semantic color tokens live here. */
:root {
  --brand-charcoal: #191C20;
  --brand-accent: #85BB65;
  --brand-accent-hover: #78AD58;
  --brand-charcoal-rgb: 25 28 32;
  --max: 1180px;
  --page-bg: #F7F8F2;
  --surface-card: #FFFFFF;
  --surface-secondary: #EDF2E5;
  --surface-elevated: #FFFFFF;
  --text-primary: #191C20;
  --text-secondary: #525B49;
  --border-subtle: #D8DFCF;
  --border-control: #6F796D;
  --link: #456D30;
  --link-hover: #355523;
  --link-visited: #3D602B;
  --focus-ring: #456D30;
  --on-charcoal: #F3F6EE;
  --on-charcoal-secondary: #D0D8C9;
  --shadow-rgb: 25 28 32;
  --status-success: #28724F;
  --status-success-bg: #E1F2E7;
  --status-warning: #8A4B13;
  --status-warning-bg: #FAE9D2;
  --status-error: #A43832;
  --status-error-bg: #F8E4E1;
  --status-info: #456D30;
  --status-info-bg: #E8F1E0;
  --event-ticket: #456D30;
  --event-contact: #28724F;
  --event-agreement: #9A4E32;
  --event-invoice: #657A32;
  --event-time: #626B5E;
  --button-secondary-bg: var(--brand-charcoal);
  --button-secondary-text: var(--on-charcoal);
  color-scheme: light;
}

html[data-theme="dark"] {
  --page-bg: #191C20;
  --surface-card: #262B31;
  --surface-secondary: #30363D;
  --surface-elevated: #30363D;
  --text-primary: #F3F6EE;
  --text-secondary: #BAC3B2;
  --border-subtle: #434C42;
  --border-control: #6F796D;
  --link: #85BB65;
  --link-hover: #78AD58;
  --link-visited: #ACD493;
  --focus-ring: #85BB65;
  --on-charcoal: #F3F6EE;
  --on-charcoal-secondary: #BAC3B2;
  --shadow-rgb: 5 7 8;
  --status-success: #87D7AC;
  --status-success-bg: #203F32;
  --status-warning: #FFC27A;
  --status-warning-bg: #56361E;
  --status-error: #FFB4AA;
  --status-error-bg: #5B2D2C;
  --status-info: #85BB65;
  --status-info-bg: #263321;
  --event-ticket: #85BB65;
  --event-contact: #87D7AC;
  --event-agreement: #E69B78;
  --event-invoice: #B8D06F;
  --event-time: #BAC3B2;
  --button-secondary-bg: var(--surface-elevated);
  --button-secondary-text: var(--text-primary);
  color-scheme: dark;
}

body { background: var(--page-bg); color: var(--text-primary); }
a, a:visited { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline-color: var(--focus-ring); }

.site-header { background: color-mix(in srgb, var(--page-bg) 94%, transparent); }
.nav-menu, #site-nav, .skip-link { background: var(--surface-elevated); }
.theme-toggle, .nav-toggle, .time-chip, .expand-timeline, input, select, textarea { border-color: var(--border-control); }
.theme-toggle:hover, .nav-toggle:hover, .time-chip:hover, .expand-timeline:hover { border-color: var(--focus-ring); background: var(--surface-secondary); }
.time-chip.active { border-color: var(--link); background: var(--brand-accent); color: var(--brand-charcoal); }

.brand-wordmark-backup { color: var(--brand-charcoal); }
.brand-wordmark-psa { color: var(--link); }
html[data-theme="dark"] .brand-wordmark-backup { color: var(--on-charcoal); }
html[data-theme="dark"] .brand-wordmark-psa { color: var(--brand-accent); }
footer .brand-wordmark-backup { color: var(--on-charcoal); }
footer .brand-wordmark-psa { color: var(--brand-accent); }
.brand-mark { background: transparent; box-shadow: none; }

.button, .button:visited {
  border: 1px solid color-mix(in srgb, var(--brand-charcoal) 30%, var(--brand-accent));
  background: var(--brand-accent);
  color: var(--brand-charcoal) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}
.button:hover { border-color: color-mix(in srgb, var(--brand-charcoal) 40%, var(--brand-accent-hover)); background: var(--brand-accent-hover); color: var(--brand-charcoal) !important; }
.button:active { background: color-mix(in srgb, var(--brand-charcoal) 12%, var(--brand-accent-hover)); box-shadow: inset 0 2px 4px rgb(var(--brand-charcoal-rgb) / .18); }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.button.secondary, .button.secondary:visited { border-color: var(--brand-charcoal); background: var(--button-secondary-bg); color: var(--button-secondary-text) !important; box-shadow: none; }
html[data-theme="dark"] .button.secondary { border-color: var(--border-control); }

.hero { background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%), var(--page-bg); }
.card, .price-card, .product-frame, .vendor-grid > a, .workflow li, .callout, .account-card, .waitlist-card { background: var(--surface-card); }
.card.linked:hover, .vendor-grid > a:hover { border-color: var(--link); }
.card.linked span:last-child, .eyebrow, .vendor-grid em, .steps li > span { color: var(--link); }
.icon, .badge { background: color-mix(in srgb, var(--brand-accent) 18%, var(--surface-card)); color: var(--link); }
.price-card.featured { border-color: var(--brand-accent-hover); box-shadow: 0 20px 50px rgb(var(--shadow-rgb) / .12); }

.appbar, .cta, .doc-cta, footer { background: var(--brand-charcoal); color: var(--on-charcoal); }
html[data-theme="dark"] .appbar, html[data-theme="dark"] .cta, html[data-theme="dark"] .doc-cta, html[data-theme="dark"] footer { background: var(--surface-card); }
.cta p, .doc-cta p, footer p, .footer-base { color: var(--on-charcoal-secondary); }
.footer-base { border-color: color-mix(in srgb, var(--brand-accent) 24%, var(--brand-charcoal)); }
footer a, footer a:visited, footer .brand { color: var(--on-charcoal) !important; }
footer a:hover { color: var(--brand-accent) !important; }

.status, .tag { background: var(--status-success-bg); color: var(--status-success); }
.waitlist-error { border-left-color: var(--status-error); background: var(--status-error-bg); color: var(--status-error); }
.diff del { background: var(--status-error-bg); }
.diff ins { background: var(--status-success-bg); }
.boundary, .notice { border-left-color: var(--link); background: color-mix(in srgb, var(--brand-accent) 12%, var(--surface-card)); }

.ticket-point { --event-color: var(--event-ticket); }
.contact-point { --event-color: var(--event-contact); }
.agreement-point { --event-color: var(--event-agreement); }
.invoice-point { --event-color: var(--event-invoice); }
.time-point { --event-color: var(--event-time); }
.customer-baseline, .customer-stem, .customer-lane-track::before { background: color-mix(in srgb, var(--text-secondary) 62%, var(--surface-card)); }

.home-hero .hero-grid { border-color: var(--border-subtle); background: var(--page-bg); }
html[data-theme="dark"] .home-hero .hero-grid { background: var(--brand-charcoal); }
.home-hero .hero-copy { color: var(--text-primary); }
.home-hero .lede, .home-hero .micro { color: var(--text-secondary); }
.home-hero .text-link { color: var(--link); }
.home-hero .hero-art::after { background: linear-gradient(90deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 90%, transparent) 39%, transparent 72%); }
.homepage-headline-accent { color: var(--link); }
.homepage-pain-points li::before { background: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
.homepage-signup-panel { border-color: color-mix(in srgb, var(--link) 60%, var(--border-subtle)); background: var(--surface-card); color: var(--text-primary); box-shadow: 0 16px 34px rgb(var(--shadow-rgb) / .14); }
.homepage-signup-panel .eyebrow, .homepage-signup-note { color: var(--link); }
.homepage-signup-panel .pricing-link, .homepage-signup-panel .pricing-link:visited { color: var(--link); }
.email-signup-form input[type="email"], .waitlist-controls input, .account-card input { border-color: var(--border-control); background: var(--surface-card); color: var(--text-primary); }
html[data-theme="dark"] .homepage-signup-panel input[type="email"] { border-color: var(--border-control); background: var(--surface-card); color: var(--text-primary); }
html[data-theme="dark"] .homepage-signup-panel input[type="email"]::placeholder { color: var(--text-secondary); }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: .82; }

.homepage-integration-banner { --ticker-surface: var(--surface-secondary); --ticker-surface-hover: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-secondary)); --ticker-border: var(--border-subtle); --ticker-text: var(--text-primary); --ticker-link: var(--link); box-shadow: 0 8px 20px rgb(var(--shadow-rgb) / .1); }
.integration-ticker-label, .integration-ticker-label:visited { background: var(--brand-accent); color: var(--brand-charcoal); }
.integration-ticker-label:hover { background: var(--brand-accent-hover); color: var(--brand-charcoal); }
.integration-ticker-label > span { background: var(--status-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-success) 22%, transparent); }
.integration-marquee-icon { background: white; color: var(--brand-charcoal); }
.integration-marquee-item small { color: var(--link); }
.homepage-customer-history-callout .button { border-color: var(--link); background: transparent; color: var(--link) !important; box-shadow: none; }
.homepage-customer-history-callout .button:hover { background: color-mix(in srgb, var(--brand-accent) 14%, transparent); }

.homepage-product-screenshot, .screenshot-viewport { background: var(--surface-card); box-shadow: 0 18px 42px rgb(var(--shadow-rgb) / .16); }
.homepage-workflow-steps li > span, .homepage-workflow-carousel .screenshot-indicator.is-active { border-color: var(--link); background: var(--brand-accent); color: var(--brand-charcoal); }
.screenshot-indicator { border-color: var(--border-control); background: var(--surface-card); color: var(--text-primary); }
.homepage-closing-offer { background: linear-gradient(135deg, var(--surface-secondary), color-mix(in srgb, var(--brand-accent) 8%, var(--surface-card))); }
.waitlist-card.on-dark { border-color: var(--border-control); background: color-mix(in srgb, var(--surface-card) 94%, transparent); }
.waitlist-card.on-dark > small { color: var(--text-secondary); }
.toc { background: var(--surface-card); }

.homepage-hero-artwork img[data-hero-theme] { transition: opacity .15s ease; }
.homepage-hero-artwork img[data-hero-theme="dark"] { display: none; }
html[data-theme="dark"] .homepage-hero-artwork img[data-hero-theme="light"] { display: none; }
html[data-theme="dark"] .homepage-hero-artwork img[data-hero-theme="dark"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .homepage-hero-artwork img[data-hero-theme] { transition: none; }
}