/* Colour skins, set on <html data-skin="…"> by skin.js. Ink is the base palette in nova-tokens.css. Logos stay ink/ivory. */

/* Light keeps ivory surfaces; dark keeps ink surfaces. A skin only colours the accents (buttons, selection,
   highlights, links) so both modes stay clean. Dark mode uses a lighter shade so text passes contrast on ink. */

/* Maroon & Ivory (default) */
:root[data-skin="maroon"][data-theme="light"]{
  --nv-accent:#6E1E2E; --nv-accent-hover:#581624; --nv-on-accent:#FAF8F3;
  --nv-accent-soft:#F1E2E4; --nv-accent-soft-text:#6E1E2E; --nv-accent-panel:#F8EEEF; --nv-accent-panel-line:#E6CCD1;
  --nv-selected:#F1E2E4; --nv-owner-you:#6E1E2E; --nv-skin:#6E1E2E;
}
:root[data-skin="maroon"]:not([data-theme="light"]){
  --nv-accent:#C9687B; --nv-accent-hover:#D6828F; --nv-on-accent:#111214;
  --nv-accent-soft:#3A1A22; --nv-accent-soft-text:#F6DCE1; --nv-accent-panel:#1C1215; --nv-accent-panel-line:#4A2530;
  --nv-selected:#2A1A1F; --nv-owner-you:#C9687B; --nv-skin:#C9687B;
}

/* Forest */
:root[data-skin="forest"][data-theme="light"]{
  --nv-accent:#1F4D35; --nv-accent-hover:#173D2A; --nv-on-accent:#FAF8F3;
  --nv-accent-soft:#E1ECE4; --nv-accent-soft-text:#1F4D35; --nv-accent-panel:#EEF4EF; --nv-accent-panel-line:#C9DCCF;
  --nv-selected:#E1ECE4; --nv-owner-you:#1F4D35; --nv-skin:#1F4D35;
}
:root[data-skin="forest"]:not([data-theme="light"]){
  --nv-accent:#6FB58C; --nv-accent-hover:#88C6A1; --nv-on-accent:#111214;
  --nv-accent-soft:#1B3326; --nv-accent-soft-text:#DCEFE3; --nv-accent-panel:#121A16; --nv-accent-panel-line:#2A4536;
  --nv-selected:#1A2A21; --nv-owner-you:#6FB58C; --nv-skin:#6FB58C;
}

/* Midnight */
:root[data-skin="midnight"][data-theme="light"]{
  --nv-accent:#1E3560; --nv-accent-hover:#172A4D; --nv-on-accent:#FAF8F3;
  --nv-accent-soft:#E2E8F2; --nv-accent-soft-text:#1E3560; --nv-accent-panel:#EEF2F8; --nv-accent-panel-line:#CAD5E6;
  --nv-selected:#E2E8F2; --nv-owner-you:#1E3560; --nv-skin:#1E3560;
}
:root[data-skin="midnight"]:not([data-theme="light"]){
  --nv-accent:#7FA2E0; --nv-accent-hover:#99B6EA; --nv-on-accent:#111214;
  --nv-accent-soft:#1C2A45; --nv-accent-soft-text:#DFE8F8; --nv-accent-panel:#11161F; --nv-accent-panel-line:#2A3B5C;
  --nv-selected:#1A2233; --nv-owner-you:#7FA2E0; --nv-skin:#7FA2E0;
}

/* Plum */
:root[data-skin="plum"][data-theme="light"]{
  --nv-accent:#5A2768; --nv-accent-hover:#481F53; --nv-on-accent:#FAF8F3;
  --nv-accent-soft:#EEE3F1; --nv-accent-soft-text:#5A2768; --nv-accent-panel:#F6EFF8; --nv-accent-panel-line:#DFCDE5;
  --nv-selected:#EEE3F1; --nv-owner-you:#5A2768; --nv-skin:#5A2768;
}
:root[data-skin="plum"]:not([data-theme="light"]){
  --nv-accent:#B98AD0; --nv-accent-hover:#C9A1DB; --nv-on-accent:#111214;
  --nv-accent-soft:#33213D; --nv-accent-soft-text:#EEE0F5; --nv-accent-panel:#18121C; --nv-accent-panel-line:#45304F;
  --nv-selected:#251B2B; --nv-owner-you:#B98AD0; --nv-skin:#B98AD0;
}

/* Ink: the base palette (ink buttons on ivory, ivory buttons on ink). */
:root[data-skin="ink"]{ --nv-skin:#111214; }

/* Skin picker in the account menu */
.skin-choice{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.skin-choice button{width:28px;height:28px;border-radius:999px;padding:0;cursor:pointer;border:2px solid var(--nv-line-stronger);background:var(--sw);position:relative}
.skin-choice button::after{content:"";position:absolute;inset:5px;border-radius:999px;background:#FAF8F3;clip-path:inset(0 0 0 50%)}
.skin-choice button[aria-checked="true"]{border-color:var(--nv-text);box-shadow:0 0 0 2px var(--nv-bg) inset}
.skin-choice button:focus-visible{outline:2px solid var(--nv-text);outline-offset:2px}
.skin-name{font-size:var(--nv-fs-caption);color:var(--nv-muted);margin:2px 0 0}
/* The sidebar scrolls on short screens; while the account menu is open let it show past the edge. */
.nova-sidebar:has(.workspace-account[open]){overflow:visible}
/* The account menu scrolls when it's taller than its limit; its rows must never be squashed (that put the
   Colour heading over the Light/Dark/Auto buttons). */
.account-options>*{flex-shrink:0}
/* Phone "More" sheet: Appearance and Colour */
.nova-more-look{display:grid;gap:8px;margin-top:12px}
.nova-more-look .theme-choice{display:flex}