/* Whiiso V31 scratch visual parity for public landing + login/signup.
 * Structural V31 landing and auth artwork is already present in production.
 * This layer aligns their colors/typography without replacing working forms,
 * links, responsive rules, or the newer approved guiding-W logo. */
:root{
  --font-body:'Whiiso Figtree',Figtree,system-ui,sans-serif;
  --font-display:'Whiiso Figtree',Figtree,system-ui,sans-serif;
  --ink:#1b0036;--ink-2:#1b0036;--muted:#7b6f8c;
  --base:#f6eef7;--line:#e8d9ee;--hair:#ead9ee;
  --violet:#1b0036;--magenta:#c39cc5;--orange:#1b0036;
  --lilac:#e2c9f1;--pink:#f0dedb;--peach:#eed6c1;
  --sky:#dadceb;--lime:#d8edc0;--teal:#84b2bc;
  --grad-brand:linear-gradient(135deg,#e2c9f1,#f0dedb 55%,#eed6c1);
  --grad-hero-text:linear-gradient(100deg,#1b0036,#1b0036);
  --btn-dark:linear-gradient(180deg,#2a0b4d,#1b0036);
  --sh-card:0 1px 2px #29153c0a,0 16px 32px -18px #462e7140;
  --r-card:28px;--r-input:18px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);text-rendering:optimizeLegibility}
/* V31 landing remains the same responsive image-led composition; do not
 * alter its absolute hero/media positioning or card asset geometry. */
body:has(#hero){background:#fff;color:#111}
body:has(#hero) .logo{font-family:var(--font-display)}
body:has(#hero) #hero{
  background:
    linear-gradient(180deg,#fcfaff00 80%,#f6eef7 100%),
    radial-gradient(ellipse at 6% 6%,#d9e5fb,transparent 55%),
    radial-gradient(ellipse at 96% 28%,#e7dbfb,transparent 52%),
    radial-gradient(ellipse at 52% 108%,#fde0e6,transparent 58%),
    radial-gradient(ellipse at 4% 96%,#d3e3fa,transparent 46%),
    #f8f5fd;
}
body:has(#hero) #hero .nav{
  background:#f7f2f9eb;border:1px solid #e8d9ee;box-shadow:none;
}
body:has(#hero) #hero .nav a{color:#1b0036}
body:has(#hero) #hero .nav a:hover{background:#fff}
body:has(#hero) .btn{font-family:var(--font-body)}
body:has(#hero) #world .w8-card{border-color:#fff}
body:has(#hero) #testi .wh-cta,
body:has(#hero) #testi .wh-footer{font-family:var(--font-body)}
/* V31 auth: white form side, plum controls, pastel right-hand illustration. */
body:has([data-form=login]),body:has([data-form=signup]){
  color:var(--ink);background:#f6eef7;
}
body:has([data-form=login]) .shell{gap:16px}
body:has([data-form=login]) .side{background:transparent}
body:has([data-form=login]) .stage{
  background:
    radial-gradient(ellipse at 10% 8%,#dfe8fb,transparent 55%),
    radial-gradient(ellipse at 95% 20%,#e2c9f1,transparent 55%),
    radial-gradient(ellipse at 55% 110%,#f0dedb,transparent 60%),
    #f7eff8;
  border:1px solid white;border-radius:32px;box-shadow:var(--sh-card);
}
body:has([data-form=login]) .view h1,
body:has([data-form=login]) .view h1 mark{color:var(--ink)}
body:has([data-form=login]) .view h1 mark{
  background:transparent;-webkit-text-fill-color:var(--ink);
}
body:has([data-form=login]) .view .sub{color:var(--muted)}
body:has([data-form=login]) .btn:not(.btn--ghost){
  background:var(--btn-dark);color:#fff;border:0;
}
body:has([data-form=login]) .btn--ghost{
  background:#fff;border:1px solid var(--hair);color:var(--ink);
}
body:has([data-form=login]) .input input{
  border:1.5px solid #e8d9ee;border-radius:18px;
  background:#fff;color:var(--ink);
}
body:has([data-form=login]) .input input:focus{
  border-color:#a579b2;box-shadow:0 0 0 3px #e2c9f18a;
}
body:has([data-form=login]) .input input::placeholder{color:#aa93b0}
body:has([data-form=login]) .switch a,
body:has([data-form=login]) .link{color:#683774}
body:has([data-form=login]) .stage h2{color:var(--ink)}
body:has([data-form=login]) .stage h2 mark{
  background:linear-gradient(100deg,#1b0036,#765484 66%,#ae81b0);
  color:transparent;-webkit-text-fill-color:transparent;
}
body:has([data-form=login]) .check input:checked+i{
  background:linear-gradient(135deg,#6a3578,#1b0036);
}
:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid #94649b;outline-offset:2px;
}
@media(max-width:760px){
  body:has([data-form=login]) .shell{gap:0}
  body:has([data-form=login]) .stage{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}