/* The OS preference is the only source of truth, including without JavaScript.
   Palette changes animate in both directions; the initial paint is already themed. */
:root {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #f7f7fa;
  --raised: #ffffff;
  --hover: #f0eff8;
  --field: #fbfafc;
  --ink: #080808;
  --muted: #696974;
  --soft: #747480;
  --line: #e9e9f1;
  --field-border: #e4e1ed;
  --header: #ffffffed;
  --accent-link: #5359e8;
  --accent-hover: #4248d4;
  --accent-tint: #eeecff;
  --accent-ink: #6561b5;
  --success-bg: #e7f3ed;
  --success-ink: #377660;
  --pending-bg: #fff7e9;
  --pending-ink: #887039;
  --chart: #696cf3;
  --halo: #e7e7ff;
  --backdrop: #18142b55;
  --checkout-shadow: #64628715;
  --theme-duration: 480ms;
  --theme-easing: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #101014;
    --surface: #1a1a21;
    --raised: #23232d;
    --hover: #2b2a37;
    --field: #191920;
    --ink: #f3f3f6;
    --muted: #b1b1bf;
    --soft: #a0a0b1;
    --line: #32323e;
    --field-border: #414150;
    --header: #101014ed;
    --accent-link: #a5a8ff;
    --accent-hover: #c1c3ff;
    --accent-tint: #302e4e;
    --accent-ink: #c4bfff;
    --success-bg: #203d34;
    --success-ink: #8fdcbb;
    --pending-bg: #3b3221;
    --pending-ink: #e2c68b;
    --chart: #a0a2ff;
    --halo: #35305c;
    --backdrop: #050509a6;
    --checkout-shadow: #00000042;
  }
}

/* Common surfaces: avoid gradients on containers whose colours interpolate. */
html,body { background-color:var(--canvas); color:var(--ink); }
.site-header,.main-nav { background-color:var(--header); }
.site-header.scrolled,.main-nav { border-color:var(--line); }
.main-nav>a { color:var(--muted); }
.main-nav>a:hover { color:var(--accent-link); }
.preview-card,.solution-card,.methods-layout,.flow-panel,.api-section,.pricing-note,.final-cta {
  background-image:none; background-color:var(--surface); color:var(--ink);
}
.methods-section { background-color:var(--canvas); }
.method-option.active,.method-icon,.event-icon,.control-visual>div,.flow-terminal,.checkout-card,.modal {
  background-color:var(--raised); border-color:var(--line);
}
.modal { color:var(--ink); }
.modal::backdrop { background-color:var(--backdrop); }
.modal input,.modal textarea,.modal select,#application-text,.docs-endpoint,.checkout-detail {
  background-color:var(--field); color:var(--ink); border-color:var(--field-border);
}
.modal input::placeholder,.modal textarea::placeholder { color:var(--soft); opacity:1; }
.modal label,td,.docs-modal code { color:var(--muted); }
.optional,th,.modal-close { color:var(--soft); }
td:first-child { color:var(--ink); }
th,td { border-color:var(--line); }
.modal select option { background-color:var(--raised); color:var(--ink); }
.docs-endpoint b { color:var(--accent-link); }

/* The video's baked-in backgrounds are intentional contrasting art surfaces.
   Scope their palettes so the original chrome colours stay untouched. */
.solution-large {
  --surface:#000000; --raised:#2d2d2d; --ink:#ffffff;
  --muted:#b1b1bc; --accent-link:#b3b6ff; --accent-hover:#d0d2ff;
  --soft:#d9d9e0;
}
.solution-api {
  color-scheme:light;
  --surface:#f9f9f9; --raised:#ffffff; --ink:#080808;
  --muted:#696974; --soft:#6d6d78;
  --accent-link:#5359e8; --accent-hover:#4248d4;
}
.product-badge,.solution-large .product-badge { background-color:var(--raised); color:var(--soft); }
.solution-card p,.solution-card:not(.solution-large) p,.solution-large p { color:var(--muted); }
.solution-card .text-link,.solution-large .text-link { color:var(--accent-link); }
.solution-card .text-link:hover { color:var(--accent-hover); }

/* Text remains legible in page content, illustrations and modal states. */
p,.hero-description,.split-heading p,.api-copy>p,.final-cta p,.form-note,.faq-list details p,
.footer-top>div>p,.footer-links a,.footer-links button,.method-option small,.method-bottom,
.api-benefits li,.audience-strip>div,.event-row strong,.checkout-method-text,
.checkout-product,.checkout-detail small,.checkout-secure,.method-display-note,
.flow-terminal pre,.terminal-bar>small,.terminal-footer { color:var(--muted); }
.card-label,.soft-tag,.small-line,.payment-preview h3,.balance-detail,.balance-amount>small,
.event-row small,.event-time,.events-footer,.audience-strip>span,.footer-region,
.footer-bottom,.footer-bottom>span:nth-child(2),.back-to-top,.settlement-label,
.step-kicker,.checkout-amount>span,.demo-badge { color:var(--soft); }
.api-copy h2,.api-copy h2>span,.final-cta h2,.footer-links strong,
.settlement-label strong,.checkout-method-text strong,.checkout-detail strong { color:var(--ink); }
.balance-amount>span,.payment-amount>span { color:var(--muted); }
.eyebrow,.api-copy .eyebrow,.final-cta>.eyebrow,.onboarding-number,
.text-link,.flow-step.active,.faq-list details[open] summary,.api-benefits svg { color:var(--accent-link); }
.text-link:hover,.footer-links a:hover,.footer-links button:hover { color:var(--accent-hover); }
.flow-step { color:var(--soft); }
.flow-step.active { border-color:var(--accent-link); }
.faq-list summary>span,.pricing-note>div>svg,.audience-strip svg { color:var(--soft); }

/* Small payment UI uses the same surface and state palette. */
.soft-tag,.demo-badge { background-color:var(--field); }
.green-pill,.tether-badge,.status-square,.control-visual>div>span:last-child {
  background-color:var(--success-bg); color:var(--success-ink);
}
.status-square.pending,.control-visual>div:nth-child(2)>span:last-child {
  background-color:var(--pending-bg); color:var(--pending-ink);
}
.control-visual>div { color:var(--muted); }
.payment-status-icon {
  background-image:none; background-color:var(--success-bg); color:var(--success-ink);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--success-bg) 50%,transparent);
}
.green-dot-text { color:var(--success-ink); }
.method-icon { color:var(--soft); }
.method-option.active .method-icon,.checkout-banks span,.violet,.lavender {
  background-color:var(--accent-tint); color:var(--accent-ink);
}
.mint { background-color:var(--success-bg); color:var(--success-ink); }
.method-option:hover,.icon-button:hover { background-color:var(--hover); }
.method-option.active { background-color:var(--raised); }
.method-arrow { color:var(--accent-link); }
.checkout-card { box-shadow:0 18px 60px var(--checkout-shadow); }
.demo-qr { background:#fff; }
.chart-stroke { stroke:var(--chart); }
.balance-chart stop { stop-color:var(--chart); }
.mini-separator,.terminal-bar>span { background-color:var(--line); }
.events-footer,.checkout-header,.method-bottom,.terminal-bar,.terminal-footer,
.footer-bottom,.footer-links { border-color:var(--line); }
.button-outline { background-color:var(--raised); color:var(--ink); border-color:var(--field-border); }
.button-outline:hover { background-color:var(--hover); }
.code-copy:hover { background-color:#3d354e; color:#ece3fa; }
.code-language,.code-foot,.code-copy { color:#aaa3b7; }
.code-tabs button { color:#b0a8c0; }
.code-tabs button.active { color:#ded8f8; }

/* The checkout halo fades between two layers instead of jumping gradients. */
.method-display { background:none; isolation:isolate; }
.method-display::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; background-color:var(--halo);
  mask-image:radial-gradient(ellipse,#0009,transparent 70%);
}

/* Shared rules are essential for a soft return to light as well as to dark.
   Keep transform/opacity/translate transitions used by the existing UI. */
:root,:root body,:root body :where(header,nav,main,section,article,footer,div,span,p,h1,h2,h3,
a,button,svg,stop,label,input,textarea,select,option,pre,code,small,strong,b,i,
ul,li,details,summary,dialog,table,th,td),:root .method-display::before,:root .modal::backdrop {
  transition-property:background-color,color,border-color,box-shadow,fill,stroke,stop-color,
    transform,translate,opacity;
  transition-duration:var(--theme-duration),var(--theme-duration),var(--theme-duration),
    var(--theme-duration),var(--theme-duration),var(--theme-duration),var(--theme-duration),
    250ms,350ms,250ms;
  transition-timing-function:var(--theme-easing);
}
@media (prefers-reduced-motion: reduce) {
  :root { --theme-duration:0ms; }
  *,*::before,*::after { transition:none!important; }
}