/* The landing and app use the same picker, color tokens and saved preference. */
:root[data-cartera-theme] {--landing-accent:var(--ui-primary);--brand-blue:var(--landing-accent);--brand-blue-hover:var(--ui-primary)}
:root[data-cartera-theme="yellow"] {--landing-accent:var(--ui-ink)}
body,.site-scroll,.topbar,.demo-dock,.roles,.showcase+.roles {background:var(--ui-background);color:var(--ui-ink)}
.hero {background:linear-gradient(135deg,var(--ui-background) 65%,var(--ui-secondary))}
.showcase {background:var(--ui-secondary)}
.topbar .brand img {mix-blend-mode:multiply}
.hero-lead,.flow-note,.profile-tabs button,.sample-total span,.sample-facts dt,.sample-note,.sample-method p,.registration-profile span {color:var(--ui-muted)}
.steps li {border-color:var(--ui-line)}
.flow-note,.carousel.is-carousel .steps li,.avatar,.avatar.navy,.avatar.blue,.avatar.green,.avatar.cyan,.sample-header>span:last-child {background:var(--ui-secondary);color:var(--ui-ink)}
.sample-screen,.role-card,.example-slide,.registration-choice,.web-dialog {background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
.sample-facts>div,.registration-profile,#access-form :is(input,textarea),.outline-button {border-color:var(--ui-line)}
.registration-profile {color:var(--ui-ink)}
.registration-info-button,.registration-profile small,.access-dialog .access-switch button {color:var(--landing-accent)}
.registration-profile:hover,.registration-profile:focus-visible {border-color:var(--landing-accent);outline-color:var(--landing-accent)}
.profile-info-example {border-color:var(--landing-accent)}
.sample-badge:not(.good):not(.warning) {background:var(--ui-secondary);color:var(--ui-ink)}
.login-button,.button,.floating-demo {background:var(--ui-primary);color:var(--ui-primary-ink)}
.login-button:hover,.button:hover,.floating-demo:hover {background:var(--ui-primary);filter:brightness(.94)}
.footer {background:var(--ui-secondary);color:var(--ui-ink)}
.footer span {color:var(--ui-muted)}
.made-by {background:var(--ui-surface)}
.web-access-actions {margin-left:auto}
[data-landing-theme] {flex:none}
[data-landing-theme]:empty {display:none}
.navrow {gap:12px}
@media(max-width:760px) {
  .navrow {gap:8px}
  .topbar .brand {width:82px;max-width:82px}
  .web-access-actions {gap:6px}
  .web-access-actions .inline-button {font-size:12px;padding:8px 2px;white-space:nowrap}
  .web-access-actions .login-button {min-width:0;min-height:44px;padding:8px 9px;font-size:12px;gap:4px}
}
@media(max-width:380px) {
  .navrow {gap:6px}
  .topbar .brand {width:56px;max-width:56px}
  .web-access-actions {gap:3px}
  .web-access-actions .login-button {padding-inline:8px}
  .web-access-actions .login-button span {display:none}
}
#access-form .passkey-login:not([hidden]){display:flex;justify-content:center;width:100%;margin-top:10px;border:1px solid var(--ui-line,#a7c5d6);cursor:pointer}