/* Dark / Bright modes consume the selected identity tokens from studio.js.
   This layer changes colour and depth only; composition and typography stay intact. */
body[data-mode="dark"]{color-scheme:dark;--mode-edge:#ffffff12;--mode-shadow:#00000022;--mode-well:#00000018}
body[data-mode="bright"]{color-scheme:light;--mode-edge:#ffffffc7;--mode-shadow:#1a25300a;--mode-well:#18243108}
body[data-mode]{background:var(--book-base);background-image:none;color:var(--book-ink)}
body[data-mode] .workspace{background:transparent;color:var(--book-ink)}
body[data-mode] .sidebar,body[data-mode] .preview-stage{background:var(--book-surface);background-image:none;border-color:var(--book-line)}
body[data-mode] .preview-stage{box-shadow:0 12px 28px var(--mode-shadow)}
body[data-mode] .direction-heading,body[data-mode] .palette-footer{color:var(--book-ink);border-color:var(--book-line)}
body[data-mode] .direction-heading p,body[data-mode] .direction-kicker,body[data-mode] .palette-footer p,body[data-mode] .workspace-footnote{color:var(--book-muted)}

/* Reset every auth identity, including the old local variables inside Nova's card. */
body[data-mode] #login-device .auth-screen,
body[data-mode] #login-device .auth-card,
body[data-mode] #login-device .auth-invitation{
  --auth-bg:var(--base);
  --auth-ink:var(--ink);
  --auth-muted:var(--muted);
  --auth-field:var(--surface);
  --auth-line:var(--line);
  --auth-accent:var(--accent);
  --auth-on:var(--on-accent);
  color:var(--ink);
}
body[data-mode] #login-device{background:var(--base);color:var(--ink)}
body[data-mode] #login-device .auth-screen{background:var(--base);background-image:none}
body[data-mode] #login-device .auth-title,
body[data-mode] #login-device .auth-title-last,
body[data-mode] #login-device .auth-title>span,
body[data-mode] #login-device .auth-title strong{color:var(--ink);text-shadow:none}
body[data-mode] #login-device .auth-title strong{color:var(--ink)}
body[data-mode] #login-device .auth-label{color:var(--ink)}
body[data-mode] #login-device .auth-card{
  --auth-field:var(--base);
  background:var(--surface);
  background-image:none;
  border-color:var(--line);
  color:var(--ink);
  box-shadow:inset 0 1px 0 var(--mode-edge),0 3px 0 color-mix(in srgb,var(--line) 35%,transparent),0 12px 22px var(--mode-shadow);
}
body[data-mode] #login-device .auth-invitation{
  background:var(--surface);
  background-image:none;
  border-color:var(--line);
  color:var(--ink);
  box-shadow:inset 0 1px 0 var(--mode-edge),0 3px 0 color-mix(in srgb,var(--line) 35%,transparent),0 12px 22px var(--mode-shadow);
}
body[data-mode] #login-device .auth-invitation .auth-card{background:transparent;background-image:none;box-shadow:none;border-color:var(--line)}
body[data-mode] #login-device .auth-phone{
  background:var(--auth-field);
  background-image:none;
  color:var(--ink);
  border-color:var(--line);
  box-shadow:inset 0 2px 3px var(--mode-well),inset 0 -1px 0 var(--mode-edge);
}
body[data-mode] #login-device .auth-phone input,
body[data-mode] #login-device .auth-country,
body[data-mode] #login-device .auth-country select{color:var(--ink);background:transparent;border-color:var(--line)}
body[data-mode] #login-device .auth-phone input::placeholder{color:var(--muted);opacity:1}
body[data-mode] #login-device .auth-country option{background:var(--surface);color:var(--ink)}
body[data-mode] #login-device .auth-phone:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
body[data-mode] #login-device .auth-submit{
  background:var(--accent);
  background-image:none;
  color:var(--on-accent);
  border-color:var(--accent);
  text-shadow:none;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--light) 50%,transparent),inset 0 -2px 2px #0000000d,0 3px 0 color-mix(in srgb,var(--accent) 65%,var(--ink) 35%);
}
body[data-mode] #login-device .auth-submit:hover{background:var(--accent);filter:brightness(1.05)}
body[data-mode] #login-device .auth-helper,
body[data-mode] #login-device .auth-terms,
body[data-mode] #login-device .auth-divider,
body[data-mode] #login-device .auth-legal{color:var(--muted);text-shadow:none}
body[data-mode] #login-device .auth-divider>i{background:var(--line)}
body[data-mode] #login-device .auth-social{
  background:var(--surface);
  background-image:none;
  border-color:var(--line);
  color:var(--ink);
  box-shadow:inset 0 1px 0 var(--mode-edge);
}
body[data-mode] #login-device .auth-card .auth-social{background:var(--base)}
body[data-mode] #login-device .auth-social:hover{background:var(--soft);color:var(--ink)}
body[data-mode] #login-device .auth-social+.auth-social{border-left-color:var(--line)}
body[data-mode] #login-device .auth-art,
body[data-mode] #login-device .auth-art:before,
body[data-mode] #login-device .auth-orbit-art:before{
  background:var(--soft);
  background-image:none;
  border-color:var(--line);
  box-shadow:inset 0 1px 0 var(--mode-edge);
}
body[data-mode] #login-device .auth-nova .auth-art{background:transparent;box-shadow:none}
body[data-mode] #login-device .auth-mascot{filter:drop-shadow(0 8px 10px var(--mode-shadow))}

/* The main splash is identical in both appearances: full brand colour. */
body[data-mode] #splash-device,
body[data-mode] #splash-device .sp-screen{
  --sp-color:var(--accent);
  --sp-ink:var(--on-accent);
  background:var(--accent);
  background-image:none;
  color:var(--on-accent);
}
body[data-mode] #splash-device .sp-word,
body[data-mode] #splash-device .sp-name,
body[data-mode] #splash-device .sp-loading{color:var(--on-accent);text-shadow:none}
body[data-mode] #splash-device .sp-name{opacity:1}
body[data-mode] #home-device .statusbar,
body[data-mode] #login-device .statusbar{background:var(--base);background-image:none;color:var(--ink)}
body[data-mode] #splash-device .statusbar{--base:var(--accent);background:var(--accent);background-image:none;color:var(--on-accent)}
body[data-mode] #home-device .home-indicator,
body[data-mode] #login-device .home-indicator{background:var(--ink);opacity:.65}
body[data-mode] #splash-device .home-indicator{background:var(--on-accent);opacity:.65}
body[data-mode] #home-device .statusbar .battery,
body[data-mode] #login-device .statusbar .battery{box-shadow:inset 0 0 0 1.5px var(--base)}
body[data-mode] #splash-device .statusbar .battery{box-shadow:inset 0 0 0 1.5px var(--accent)}/* Preserve the identity fill; mode changes only neutral surfaces. */
body[data-mode] #login-device .auth-art,
body[data-mode] #login-device .auth-art:before,
body[data-mode] #login-device .auth-orbit-art:before{background:var(--accent);background-image:none;border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff35}
body[data-mode] #login-device .auth-nova .auth-art{background:transparent;box-shadow:none}
body[data-mode] #home-device .statusbar,
body[data-mode] #login-device .statusbar{--base:inherit;--ink:inherit;background:var(--base);color:var(--ink)}
body[data-mode] .theme-choice{color:var(--book-ink)}
body[data-mode] .theme-choice-text small,body[data-mode] .studio-tag{color:var(--book-muted)}
body[data-mode] .theme-choice.active{border-color:var(--book-accent);background:var(--book-surface);color:var(--book-ink)}
body[data-mode] .theme-choice.active .theme-symbol{background:var(--book-accent);color:var(--book-on)}
body[data-mode] .sidebar>.notes-button{color:var(--book-ink);border-color:var(--book-line)}
body[data-mode] .mobile-view-toggle{background:var(--book-surface);border:1px solid var(--book-line)}
body[data-mode] .mobile-view-toggle button{color:var(--book-muted)}
body[data-mode] .mobile-view-toggle button.active{background:var(--book-accent);color:var(--book-on)}
body[data-mode] .studio-brand{color:var(--book-ink)}
body[data-mode] .theme-symbol{background:var(--choice);color:var(--choice-on)}
body[data-mode] .theme-choice.active .theme-symbol{background:var(--choice);color:var(--choice-on)}
body[data-mode] #login-device .auth-blaze .auth-art{border-radius:18px}
body[data-mode] #login-device .auth-blaze .auth-art:before{display:none}
body[data-mode] #login-device .auth-blaze .auth-phone{border:1px solid var(--line);border-radius:11px}