/* ==========================================================================
   Accessibility — dark mode, reduced motion, focus rings, high contrast
   ========================================================================== */

/* -------- Design tokens: LIGHT -------- */
:root,
.afpwab-color-light {
--afpwab-bg: #ffffff;
--afpwab-bg-soft: #f8f9fb;
--afpwab-surface: #ffffff;
--afpwab-text: #0a0e27;
--afpwab-text-soft: #3b3e51;
--afpwab-muted: #6b7280;
--afpwab-line: #e6e8f0;
--afpwab-line-soft: #f0f1f5;
--afpwab-shadow: 0 4px 16px rgb(10 14 39 / 8%);
--afpwab-highlight: #f0f0ff;
--afpwab-link: #4549ec;
--afpwab-focus-ring: var(--afpwab-focus-ring, #5b5fff);
}

/* -------- Design tokens: DARK -------- */
.afpwab-color-dark {
--afpwab-bg: #0f1228;
--afpwab-bg-soft: #161a35;
--afpwab-surface: #1a1e3d;
--afpwab-text: #eef0f7;
--afpwab-text-soft: #c5c8d6;
--afpwab-muted: #9ca1b8;
--afpwab-line: #2a2e4f;
--afpwab-line-soft: #22263f;
--afpwab-shadow: 0 4px 16px rgb(0 0 0 / 40%);
--afpwab-highlight: #262a4d;
--afpwab-link: #9fa3ff;
--afpwab-focus-ring: var(--afpwab-focus-ring, #9fa3ff);
color-scheme: dark;
}

/* -------- Base overrides -------- */
html.afpwab-color-dark {
background: var(--afpwab-bg);
}

.afpwab-color-dark body {
color: var(--afpwab-text);
background: var(--afpwab-bg);
}

.afpwab-color-dark .site-header {
background: rgb(15 18 40 / 92%);
border-bottom-color: var(--afpwab-line);
}

.afpwab-color-dark .site-header.is-scrolled {
background: rgb(15 18 40 / 97%);
box-shadow: 0 6px 24px rgb(0 0 0 / 40%);
}

.afpwab-color-dark .site-footer,
.afpwab-color-dark .final-cta {
background: #07091a;
}

.afpwab-color-dark .hero-section {
background:
radial-gradient(ellipse 50% 46% at 82% 45%, rgb(91 95 255 / 15%), transparent 70%),
linear-gradient(180deg, #0f1228 0%, #131730 75%, #0f1228 100%);
}

.afpwab-color-dark .section-soft,
.afpwab-color-dark .demo-section,
.afpwab-color-dark .faq-section,
.afpwab-color-dark .pricing-section {
background: var(--afpwab-bg-soft);
}

.afpwab-color-dark .feature-card,
.afpwab-color-dark .step-card,
.afpwab-color-dark .pricing-card,
.afpwab-color-dark .testimonial-card,
.afpwab-color-dark .resource-card,
.afpwab-color-dark .faq-item,
.afpwab-color-dark .problem-panel,
.afpwab-color-dark .browser-window,
.afpwab-color-dark .demo-window,
.afpwab-color-dark .comparison-wrap {
background: var(--afpwab-surface);
border-color: var(--afpwab-line);
color: var(--afpwab-text);
}

.afpwab-color-dark h1,
.afpwab-color-dark h2,
.afpwab-color-dark h3,
.afpwab-color-dark h4,
.afpwab-color-dark .brand-copy strong,
.afpwab-color-dark .feature-card h3,
.afpwab-color-dark .step-card h3 {
color: var(--afpwab-text);
}

.afpwab-color-dark p,
.afpwab-color-dark .hero-lead,
.afpwab-color-dark .feature-card > p,
.afpwab-color-dark .step-card > p,
.afpwab-color-dark .resource-content > p,
.afpwab-color-dark .faq-answer p {
color: var(--afpwab-text-soft);
}

.afpwab-color-dark .button-quiet,
.afpwab-color-dark .button-outline {
background: var(--afpwab-surface);
border-color: var(--afpwab-line);
color: var(--afpwab-text);
}

.afpwab-color-dark .nav-list a,
.afpwab-color-dark .language-switch a {
color: var(--afpwab-text-soft);
}

.afpwab-color-dark .nav-list a:hover,
.afpwab-color-dark .nav-list a:focus-visible {
color: var(--afpwab-link);
}

.afpwab-color-dark .menu-toggle {
background: var(--afpwab-surface);
border-color: var(--afpwab-line);
color: var(--afpwab-text);
}

.afpwab-color-dark .faq-item summary,
.afpwab-color-dark .testimonial-card blockquote {
color: var(--afpwab-text);
}

/* -------- Focus rings -------- */
.afpwab-color-light :focus-visible,
.afpwab-color-dark :focus-visible,
:root :focus-visible {
outline: 3px solid var(--afpwab-focus-ring);
outline-offset: 3px;
border-radius: 4px;
}

/* -------- Reduced motion -------- */
html.afpwab-reduce-motion *,
html.afpwab-reduce-motion *::before,
html.afpwab-reduce-motion *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}

html.afpwab-reduce-motion .browser-window,
html.afpwab-reduce-motion .phone-mockup,
html.afpwab-reduce-motion .float-chip {
animation: none !important;
}

/* -------- High contrast (WCAG AAA target) -------- */
:root[data-afpwab-high-contrast="1"],
:root[--afpwab-high-contrast="1"] {
--afpwab-muted: #4b5162;
--afpwab-line: #b8bcca;
--afpwab-line-soft: #ccced9;
}

.afpwab-color-dark[data-afpwab-high-contrast="1"] {
--afpwab-muted: #b8bcca;
--afpwab-text-soft: #e0e3ee;
--afpwab-line: #4a4f78;
--afpwab-line-soft: #3a3f63;
}

/* -------- Toggle button -------- */
.afpwab-a11y-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--afpwab-line, #e6e8f0);
border-radius: 10px;
color: var(--afpwab-text, #0a0e27);
background: var(--afpwab-surface, #fff);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.afpwab-a11y-toggle:hover {
border-color: var(--afpwab-focus-ring);
color: var(--afpwab-focus-ring);
}

.afpwab-a11y-toggle__icon {
position: absolute;
transition: opacity .15s ease, transform .2s ease;
}

.afpwab-a11y-toggle {
position: relative;
}

.afpwab-color-light .afpwab-a11y-toggle__icon--light {
opacity: 1;
transform: rotate(0deg);
}

.afpwab-color-light .afpwab-a11y-toggle__icon--dark {
opacity: 0;
transform: rotate(-90deg);
}

.afpwab-color-dark .afpwab-a11y-toggle__icon--light {
opacity: 0;
transform: rotate(90deg);
}

.afpwab-color-dark .afpwab-a11y-toggle__icon--dark {
opacity: 1;
transform: rotate(0deg);
}

/* When mode is auto, subtle indicator. */
[data-afpwab-color-mode="auto"] .afpwab-a11y-toggle::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--afpwab-focus-ring);
opacity: .8;
}

/* -------- SR-only utility (fallback if theme doesn't define) -------- */
.afpwab-a11y-toggle .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

/* -------- Media query fallbacks (when JS is off) -------- */
@media (prefers-color-scheme: dark) {
:root[data-afpwab-color-mode="auto"] {
color-scheme: dark;
}
}

@media (prefers-reduced-motion: reduce) {
html:not([data-afpwab-motion="full"]) * {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}