/* CollaborAITE: five palettes, automatic and user-selected light and dark modes.
   Place palette and mode radio inputs anywhere inside <html>.
   Palette values: aureole, thistle, verdure, iris, zephyr.
   Mode values: system, light, dark. Light is the fallback.
   Logo paths are relative to this file (css/ to ../media/). */

:root {
  color-scheme: light;

  /* Brand and accent of every palette, kept together so the picker swatches can use them too. */
  --aureole-brand: hsl(43 55% 49%);
  --aureole-accent: hsl(289 47% 38%);
  --thistle-brand: hsl(282 35% 41%);
  --thistle-accent: hsl(177 36% 50%);
  --verdure-brand: hsl(160 50% 66%);
  --verdure-accent: hsl(340 64% 67%);
  --iris-brand: hsl(269 57% 72%);
  --iris-accent: hsl(47 85% 67%);
  --zephyr-brand: hsl(198 70% 72%);
  --zephyr-accent: hsl(76 68% 58%);

  /* Aureole: Luminous Antique Gold / Royal Orchid (default) */
  --brand: var(--aureole-brand);
  --accent: var(--aureole-accent);
  --on-brand: var(--light-text);
  --on-accent: white;
  --brand-lift: 25%;
  --accent-lift: 70%;
  --logo-plate: var(--light-surface);
  --logo-image: url("../media/collaboraite_logo_2_aureole.png");
  --light-page: hsl(43 38% 94%);
  --light-surface: hsl(42 40% 98%);
  --light-text: hsl(30 28% 14%);
  --dark-page: hsl(33 42% 18%);
  --dark-surface: hsl(34 30% 24%);
  --dark-text: hsl(38 35% 93%);
}

:root:has(input[name="palette"][value="thistle"]:checked) {
  --logo-image: url("../media/collaboraite_logo_2_thistle.png");
  --brand: var(--thistle-brand);
  --accent: var(--thistle-accent);
  --on-brand: white;
  --on-accent: var(--light-text);
  --brand-lift: 45%;
  --accent-lift: 0%;
  --logo-plate: var(--light-surface);
  --light-page: hsl(270 16% 95%);
  --light-surface: hsl(0 0% 100%);
  --light-text: hsl(275 18% 15%);
  --dark-page: hsl(273 24% 13%);
  --dark-surface: hsl(274 24% 20%);
  --dark-text: hsl(270 28% 95%);
}

:root:has(input[name="palette"][value="verdure"]:checked) {
  --logo-image: url("../media/collaboraite_logo_2_verdure.png");
  --brand: var(--verdure-brand);
  --accent: var(--verdure-accent);
  --on-brand: var(--light-text);
  --on-accent: color-mix(in srgb, var(--light-text) 55%, black);
  --brand-lift: 0%;
  --accent-lift: 40%;
  --logo-plate: var(--dark-page);
  --light-page: hsl(156 32% 94%);
  --light-surface: hsl(0 0% 100%);
  --light-text: hsl(168 47% 16%);
  --dark-page: hsl(163 41% 17%);
  --dark-surface: hsl(163 37% 23%);
  --dark-text: hsl(150 42% 96%);
}

:root:has(input[name="palette"][value="iris"]:checked) {
  --logo-image: url("../media/collaboraite_logo_2_iris.png");
  --brand: var(--iris-brand);
  --accent: var(--iris-accent);
  --on-brand: var(--light-text);
  --on-accent: var(--light-text);
  --brand-lift: 0%;
  --accent-lift: 0%;
  --logo-plate: var(--dark-page);
  --light-page: hsl(270 28% 95%);
  --light-surface: hsl(0 0% 100%);
  --light-text: hsl(270 18% 20%);
  --dark-page: hsl(259 36% 18%);
  --dark-surface: hsl(260 26% 25%);
  --dark-text: hsl(270 35% 97%);
}

:root:has(input[name="palette"][value="zephyr"]:checked) {
  --logo-image: url("../media/collaboraite_logo_2_zephyr.png");
  --brand: var(--zephyr-brand);
  --accent: var(--zephyr-accent);
  --on-brand: var(--light-text);
  --on-accent: var(--light-text);
  --brand-lift: 0%;
  --accent-lift: 0%;
  --logo-plate: var(--dark-page);
  --light-page: hsl(201 38% 95%);
  --light-surface: hsl(0 0% 100%);
  --light-text: hsl(207 39% 20%);
  --dark-page: hsl(215 43% 18%);
  --dark-surface: hsl(212 38% 25%);
  --dark-text: hsl(205 60% 96%);
}

/* Keeps the whole horizontal lockup visible. The PNGs are 1672 x 941 with the wordmark
   filling the full width and about 35% of the height, so a 9 / 2 box crops only the
   empty rows above and below it. Cover intentionally fills the box.
   The logo colors are the palette colors, so some would vanish on some pages (pale Verdure on a light
   page, dark Thistle on a dark page). --logo-plate is a backdrop that keeps every logo readable:
   light for Aureole and Thistle, dark for Verdure, Iris, and Zephyr. */
#logo,
.footer-logo {
  display: block;
  flex-shrink: 0;
  width: clamp(10rem, 11vw, 10.5rem);
  aspect-ratio: 9 / 2;
  background-color: var(--logo-plate);
  background-image: var(--logo-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  /* Extends the plate past the box without changing the layout. */
  box-shadow: 0 0 0 0.5rem var(--logo-plate);
}

body {
  color-scheme: light;

  /* Semantic surface roles */
  --page: var(--light-page);
  --surface: var(--light-surface);
  --inset: color-mix(in srgb, var(--light-page), black 4%);
  --band-alt: color-mix(in srgb, var(--light-page), var(--brand) 8%);
  --surface-on-alt: var(--light-surface);
  --inset-on-alt: var(--light-page);
  --reply-surface: var(--light-surface);

  /* Lines, text, and links */
  --line: color-mix(in srgb, var(--light-text) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--light-text) 30%, transparent);
  --text: var(--light-text);
  --text-muted: color-mix(in srgb, var(--light-text) 78%, white);
  --text-soft: color-mix(in srgb, var(--light-text) 74%, white);
  --link: color-mix(in srgb, var(--brand) 55%, black);
  --lime-text: color-mix(in srgb, var(--accent) 48%, black);
  --shadow: hsl(220 25% 10% / 0.12);

  /* Fills; the historical --lime names are now generic accent roles. */
  --lime: var(--accent);
  --brand-hover: color-mix(in srgb, var(--brand) 92%, var(--on-brand));
  --on-lime: var(--on-accent);

  /* Warm amber, only for the AI-use guideline warning */
  --amber: hsl(26.6 100% 35.4%);
  --amber-text: hsl(25 100% 19%);
  --amber-tint: hsl(37 81% 95%);
  --amber-line: hsl(35 71% 75%);

  /* Fixed dark surfaces (footer, impact dashboard, privacy panel) ignore the light and dark mode. */
  --night: var(--dark-page);
  --night-surface: var(--dark-surface);
  --night-line: color-mix(in srgb, var(--dark-text) 15%, transparent);
  --night-text-bright: var(--dark-text);
  --night-text-muted: color-mix(in srgb, var(--dark-text) 72%, var(--dark-page));
  --brand-on-dark: color-mix(in srgb, var(--brand), var(--dark-text) var(--brand-lift));
  --accent-on-dark: color-mix(in srgb, var(--accent), var(--dark-text) var(--accent-lift));

  /* Older names that the privacy illustration's inline SVG still uses. */
  --midnight: var(--night);
  --deep-lagoon: var(--night-surface);
  --frost: var(--night-text-bright);
  --fog: var(--night-text-muted);
  --lagoon-light: var(--brand-on-dark);
  --lagoon: var(--brand);
  --ink: var(--on-accent);

  background: var(--page);
  color: var(--text);
}

/* TODO (Firefox compatibility): Once Firefox supports custom-property
   style queries in stable releases, replace these repeated mode
   overrides with the simpler @container style(--theme: dark)
   approach described by Kevin Powell. */

/* Follow the system unless the user explicitly selects LIGHT. */
@media (prefers-color-scheme: dark) {
  :root:not(:has(input[name="mode"][value="light"]:checked)) {
    color-scheme: dark;
  }

  :root:not(:has(input[name="mode"][value="light"]:checked)) body {
    color-scheme: dark;
    --page: var(--dark-page);
    --surface: var(--dark-surface);
    --inset: color-mix(in srgb, var(--dark-page), black 15%);
    --band-alt: var(--dark-surface);
    --surface-on-alt: var(--dark-page);
    --inset-on-alt: var(--dark-surface);
    --reply-surface: var(--dark-surface);
    --line: color-mix(in srgb, var(--dark-text) 15%, transparent);
    --line-strong: color-mix(in srgb, var(--dark-text) 35%, transparent);
    --text: var(--dark-text);
    --text-muted: color-mix(in srgb, var(--dark-text) 72%, var(--dark-page));
    --text-soft: color-mix(in srgb, var(--dark-text) 68%, var(--dark-page));
    --link: var(--brand-on-dark);
    --lime-text: var(--accent-on-dark);
    --shadow: hsl(220 35% 3% / 0.45);
    --amber: hsl(37 81% 59%);
    --amber-text: hsl(35 84% 73%);
    --amber-tint: hsl(35 45% 13%);
    --amber-line: hsl(35 46% 26%);
  }
}

/* An explicit DARK selection must also work when the system prefers light. */
:root:has(input[name="mode"][value="dark"]:checked) {
  color-scheme: dark;
}

:root:has(input[name="mode"][value="dark"]:checked) body {
  color-scheme: dark;
  --page: var(--dark-page);
  --surface: var(--dark-surface);
  --inset: color-mix(in srgb, var(--dark-page), black 15%);
  --band-alt: var(--dark-surface);
  --surface-on-alt: var(--dark-page);
  --inset-on-alt: var(--dark-surface);
  --reply-surface: var(--dark-surface);
  --line: color-mix(in srgb, var(--dark-text) 15%, transparent);
  --line-strong: color-mix(in srgb, var(--dark-text) 35%, transparent);
  --text: var(--dark-text);
  --text-muted: color-mix(in srgb, var(--dark-text) 72%, var(--dark-page));
  --text-soft: color-mix(in srgb, var(--dark-text) 68%, var(--dark-page));
  --link: var(--brand-on-dark);
  --lime-text: var(--accent-on-dark);
  --shadow: hsl(220 35% 3% / 0.45);
  --amber: hsl(37 81% 59%);
  --amber-text: hsl(35 84% 73%);
  --amber-tint: hsl(35 45% 13%);
  --amber-line: hsl(35 46% 26%);
}

/* Explicit LIGHT beats the system's dark preference. */
:root:has(input[name="mode"][value="light"]:checked) {
  color-scheme: light;
}