/* MIZO themes: six colourways, each dark or light, chosen per person (Personalize, from the avatar in the top bar).
   Purple is the original Nocturne look and is left exactly as mizo.css draws it. The others set the four base colours
   (background, surface, text, accent); the accent ramps in mizo.css and the derived tokens below follow from them. */

/* Dark — shared derived tokens for every theme but Purple */
html:not([data-theme="purple"])[data-mode="dark"]{
  --color-divider:color-mix(in srgb,var(--color-text) 16%,transparent);
  --color-neutral-900:color-mix(in srgb,var(--color-text) 7%,var(--color-bg));
  --color-neutral-800:color-mix(in srgb,var(--color-text) 17%,var(--color-bg));
  --color-neutral-700:color-mix(in srgb,var(--color-text) 30%,var(--color-bg));
  --color-neutral-100:color-mix(in srgb,var(--color-text) 92%,#fff);
  --shadow-sm:0 0 0 1px color-mix(in srgb,var(--color-text) 14%,var(--color-surface));
  --shadow-md:0 0 0 1px color-mix(in srgb,var(--color-text) 24%,var(--color-surface)),0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px color-mix(in srgb,var(--color-text) 42%,var(--color-surface)),0 16px 40px rgba(0,0,0,.65);
}
/* Light — shared derived tokens for every theme but Purple (Purple uses mizo.css's light mode) */
html:not([data-theme="purple"])[data-mode="light"]{
  --color-divider:color-mix(in srgb,var(--color-text) 16%,transparent);
  --color-neutral-800:color-mix(in srgb,var(--color-text) 9%,var(--color-bg));
  --color-neutral-700:color-mix(in srgb,var(--color-text) 22%,var(--color-bg));
  --color-neutral-100:color-mix(in srgb,var(--color-text) 90%,#000);
  --shadow-sm:0 0 0 1px color-mix(in srgb,var(--color-text) 11%,var(--color-surface)),0 1px 2px color-mix(in srgb,var(--color-text) 6%,transparent);
  --shadow-md:0 0 0 1px color-mix(in srgb,var(--color-text) 15%,var(--color-surface)),0 6px 18px color-mix(in srgb,var(--color-text) 11%,transparent);
  --shadow-lg:0 0 0 1px color-mix(in srgb,var(--color-text) 19%,var(--color-surface)),0 16px 40px color-mix(in srgb,var(--color-text) 18%,transparent);
}

/* Blue — calm navy */
html[data-theme="blue"][data-mode="dark"]{--color-bg:#0e1622;--color-surface:#18222f;--color-text:#e8edf4;--color-accent:#5e9cf0}
html[data-theme="blue"][data-mode="light"]{--color-bg:#edf2f9;--color-surface:#fbfcfe;--color-text:#14202f;--color-accent:#2c6ccf}
/* Beige — warm linen and tan */
html[data-theme="beige"][data-mode="dark"]{--color-bg:#1b1813;--color-surface:#27231c;--color-text:#f0ebe2;--color-accent:#d3b083}
html[data-theme="beige"][data-mode="light"]{--color-bg:#f4eee4;--color-surface:#fffcf6;--color-text:#2a2219;--color-accent:#9b7245}
/* Burgundy — deep wine */
html[data-theme="burgundy"][data-mode="dark"]{--color-bg:#1a1114;--color-surface:#26191e;--color-text:#f1e7ea;--color-accent:#d4677f}
html[data-theme="burgundy"][data-mode="light"]{--color-bg:#f6edef;--color-surface:#fffafb;--color-text:#2a1418;--color-accent:#a1324d}
/* Black — true black and silver; in light, paper white and ink */
html[data-theme="black"][data-mode="dark"]{--color-bg:#000;--color-surface:#121214;--color-text:#f2f2f3;--color-accent:#d6d6dc}
html[data-theme="black"][data-mode="light"]{--color-bg:#f3f3f4;--color-surface:#fff;--color-text:#0b0b0c;--color-accent:#2a2a30}
/* Green — forest and sage */
html[data-theme="green"][data-mode="dark"]{--color-bg:#0f1915;--color-surface:#19251f;--color-text:#e6efe9;--color-accent:#4cbb8a}
html[data-theme="green"][data-mode="light"]{--color-bg:#edf4f0;--color-surface:#fbfdfc;--color-text:#13241c;--color-accent:#1f8a5b}
/* Purple light keeps mizo.css's light colours with a deeper accent, so buttons and links read on white */
html[data-theme="purple"][data-mode="light"]{--color-accent:#6f60c9}

/* Switching themes cross-fades the whole screen (where the browser supports it) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* Avatar button and the Personalize window */
.me-btn{width:2.9rem;height:2.9rem;border-radius:50%;padding:0;border:0;cursor:pointer;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--color-accent-900);color:var(--acc-ink);font:inherit;font-size:.85rem;font-weight:600;box-shadow:0 0 0 1px var(--line),0 0 0 3px transparent;transition:box-shadow .2s,transform .18s cubic-bezier(.34,1.4,.64,1)}
.me-btn:hover{box-shadow:0 0 0 1px var(--color-accent),0 0 0 4px color-mix(in srgb,var(--color-accent) 20%,transparent)}
.me-btn:active{transform:scale(.94)}
.me-btn img,.me-photo img{width:100%;height:100%;object-fit:cover;display:block}
.me-photo{width:7rem;height:7rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;background:var(--color-accent-900);color:var(--acc-ink);font-size:2.2rem;font-weight:600;box-shadow:0 0 0 1px var(--line)}
.me-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.theme-opt{display:flex;flex-direction:column;gap:.5rem;padding:.55rem;border-radius:var(--radius-lg);border:1px solid var(--line);background:none;color:var(--color-text);font:inherit;font-size:.88rem;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s,transform .18s cubic-bezier(.34,1.4,.64,1)}
.theme-opt:hover{border-color:color-mix(in srgb,var(--color-accent) 60%,var(--line))}
.theme-opt:active{transform:scale(.97)}
.theme-opt.on{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent)}
.theme-sw{height:3.2rem;border-radius:calc(var(--radius-lg) - 4px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.18)}
.theme-sw i{position:absolute;left:12%;right:30%;top:22%;height:28%;border-radius:4px}
.theme-sw b{position:absolute;right:12%;bottom:18%;width:22%;height:24%;border-radius:999px}
.theme-name{display:flex;justify-content:space-between;align-items:center}
.theme-name .ph-check-circle{color:var(--color-accent)}
@media (max-width:760px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.framer{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.framer-view{position:relative;border-radius:50%;overflow:hidden;cursor:grab;touch-action:none;user-select:none;background:var(--color-neutral-900);box-shadow:0 0 0 1px var(--line),0 0 0 6px color-mix(in srgb,var(--color-accent) 16%,transparent)}
.framer-view:active{cursor:grabbing}
.framer-view img{position:absolute;max-width:none;pointer-events:none}
.framer-zoom{display:flex;align-items:center;gap:.6rem;width:min(260px,100%);color:var(--muted)}
.framer-zoom input{flex:1;accent-color:var(--color-accent)}
@media (max-width:760px){.me-btn{width:2.6rem;height:2.6rem}}