/* LD6: six palette slots (light, light-1, light-2, dark, dark-1, dark-2). The design itself is the plain :root block in src/index.css
   and is the "dark" slot. Each block lists only the custom properties it changes. The @media block mirrors the light slot for visitors
   who have made no choice, so the system preference is honoured before first paint. */

:root[data-palette="light"] {
  color-scheme: light;
  --ground: var(--light-ground);
  --ink: var(--light-ink);
  --accent: var(--light-accent);
  --warm: var(--light-warm);
  --core: var(--light-core);
  --fx-haze: var(--light-haze);
}


/* :root[data-palette="light-2"] is an empty slot; fill it from the Palette Lab */

:root[data-palette="dark"] {
  /* the design itself: the plain :root block applies; this empty block exists so an explicit choice defeats the @media mirror */
}

:root[data-palette="dark-1"] {
  color-scheme: dark;
  --ground: #0a0505;
  --ink: #f0d9bd;
  --accent: #ff4433;
  --warm: #ffc457;
  --core: #fff1dc;
}

:root[data-palette="dark-2"] {
  color-scheme: dark;
  --ground: #030f0a;
  --ink: #c7eedb;
  --accent: #4ff0a0;
  --warm: #f2d45f;
  --core: #eafff1;
}

/* system preference, when no palette has been chosen: mirror of the light slot. The light slot's values are defined once, in the plain
   :root block of src/index.css (--light-*), so no colour literal sits outside a :root block. */
@media (prefers-color-scheme: light) {
  :root:not([data-palette]) {
    color-scheme: light;
    --ground: var(--light-ground);
    --ink: var(--light-ink);
    --accent: var(--light-accent);
    --warm: var(--light-warm);
    --core: var(--light-core);
    --fx-haze: var(--light-haze);
  }
}

:root[data-palette="light-2"] {
  --ground: #c63d15;
  --ink: #eaf8f5;
  --accent: #f9b012;
  --warm: #f7ffed;
  --core: #fffcf1;
  --light-ground: #f6ffef;
  --light-ink: #508e31;
  --light-accent: #ff9e8f;
  --light-warm: #1a0900;
  --light-core: #c24a06;
}

:root[data-palette="light-1"] {
  --ground: #e0dfe0;
  --ink: #5b2b20;
  --accent: #6a92cc;
  --warm: #3f0f67;
  --core: #000003;
  --light-ground: #010002;
  --light-ink: #bec2e8;
  --light-accent: #7c9349;
  --light-warm: #7f6f00;
  --light-core: #e9dd78;
}
