:root {
  /* inputs come from variables.css.
     ---------- derived: light accents ---------- */
  /* L = seed-l + tier,  C = seed-c,  H = seed-h */
  --color-light-color-0:  oklch(calc(var(--seed-0-l) + var(--tier-0)) var(--seed-0-c) var(--seed-0-h));
  --color-light-color-1:  oklch(calc(var(--seed-1-l) + var(--tier-0)) var(--seed-1-c) var(--seed-1-h));
  --color-light-color-2:  oklch(calc(var(--seed-2-l) + var(--tier-0)) var(--seed-2-c) var(--seed-2-h));
  --color-light-color-3:  oklch(calc(var(--seed-3-l) + var(--tier-0)) var(--seed-3-c) var(--seed-3-h));
  --color-light-color-4:  oklch(calc(var(--seed-0-l) + var(--tier-1)) var(--seed-0-c) var(--seed-0-h));
  --color-light-color-5:  oklch(calc(var(--seed-1-l) + var(--tier-1)) var(--seed-1-c) var(--seed-1-h));
  --color-light-color-6:  oklch(calc(var(--seed-2-l) + var(--tier-1)) var(--seed-2-c) var(--seed-2-h));
  --color-light-color-7:  oklch(calc(var(--seed-3-l) + var(--tier-1)) var(--seed-3-c) var(--seed-3-h));
  --color-light-color-8:  oklch(calc(var(--seed-0-l) + var(--tier-2)) var(--seed-0-c) var(--seed-0-h));
  --color-light-color-9:  oklch(calc(var(--seed-1-l) + var(--tier-2)) var(--seed-1-c) var(--seed-1-h));
  --color-light-color-10: oklch(calc(var(--seed-2-l) + var(--tier-2)) var(--seed-2-c) var(--seed-2-h));
  --color-light-color-11: oklch(calc(var(--seed-3-l) + var(--tier-2)) var(--seed-3-c) var(--seed-3-h));

  /* ---------- derived: dark accents ---------- */
  /* L = seed-l + seed-ld + tier,  C = seed-c * dark-chroma-mul,  H = seed-h */
  --color-dark-color-0:  oklch(calc(var(--seed-0-l) + var(--seed-0-ld) + var(--tier-0)) calc(var(--seed-0-c) * var(--dark-chroma-mul)) var(--seed-0-h));
  --color-dark-color-1:  oklch(calc(var(--seed-1-l) + var(--seed-1-ld) + var(--tier-0)) calc(var(--seed-1-c) * var(--dark-chroma-mul)) var(--seed-1-h));
  --color-dark-color-2:  oklch(calc(var(--seed-2-l) + var(--seed-2-ld) + var(--tier-0)) calc(var(--seed-2-c) * var(--dark-chroma-mul)) var(--seed-2-h));
  --color-dark-color-3:  oklch(calc(var(--seed-3-l) + var(--seed-3-ld) + var(--tier-0)) calc(var(--seed-3-c) * var(--dark-chroma-mul)) var(--seed-3-h));
  --color-dark-color-4:  oklch(calc(var(--seed-0-l) + var(--seed-0-ld) + var(--tier-1)) calc(var(--seed-0-c) * var(--dark-chroma-mul)) var(--seed-0-h));
  --color-dark-color-5:  oklch(calc(var(--seed-1-l) + var(--seed-1-ld) + var(--tier-1)) calc(var(--seed-1-c) * var(--dark-chroma-mul)) var(--seed-1-h));
  --color-dark-color-6:  oklch(calc(var(--seed-2-l) + var(--seed-2-ld) + var(--tier-1)) calc(var(--seed-2-c) * var(--dark-chroma-mul)) var(--seed-2-h));
  --color-dark-color-7:  oklch(calc(var(--seed-3-l) + var(--seed-3-ld) + var(--tier-1)) calc(var(--seed-3-c) * var(--dark-chroma-mul)) var(--seed-3-h));
  --color-dark-color-8:  oklch(calc(var(--seed-0-l) + var(--seed-0-ld) + var(--tier-2)) calc(var(--seed-0-c) * var(--dark-chroma-mul)) var(--seed-0-h));
  --color-dark-color-9:  oklch(calc(var(--seed-1-l) + var(--seed-1-ld) + var(--tier-2)) calc(var(--seed-1-c) * var(--dark-chroma-mul)) var(--seed-1-h));
  --color-dark-color-10: oklch(calc(var(--seed-2-l) + var(--seed-2-ld) + var(--tier-2)) calc(var(--seed-2-c) * var(--dark-chroma-mul)) var(--seed-2-h));
  --color-dark-color-11: oklch(calc(var(--seed-3-l) + var(--seed-3-ld) + var(--tier-2)) calc(var(--seed-3-c) * var(--dark-chroma-mul)) var(--seed-3-h));

  /* ---------- derived: neutrals ---------- */
  --color-light-neutral-1:  oklch(var(--n-1)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-2:  oklch(var(--n-2)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-3:  oklch(var(--n-3)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-4:  oklch(var(--n-4)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-5:  oklch(var(--n-5)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-6:  oklch(var(--n-6)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-7:  oklch(var(--n-7)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-8:  oklch(var(--n-8)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-9:  oklch(var(--n-9)  var(--neutral-chroma) var(--neutral-hue));
  --color-light-neutral-10: oklch(var(--n-10) var(--neutral-chroma) var(--neutral-hue));

  --color-dark-neutral-1:  oklch(var(--n-10) var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-2:  oklch(var(--n-9)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-3:  oklch(var(--n-8)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-4:  oklch(var(--n-7)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-5:  oklch(var(--n-6)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-6:  oklch(var(--n-5)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-7:  oklch(var(--n-4)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-8:  oklch(var(--n-3)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-9:  oklch(var(--n-2)  var(--neutral-chroma) var(--neutral-hue));
  --color-dark-neutral-10: oklch(var(--n-1)  var(--neutral-chroma) var(--neutral-hue));

  --shadow-color-light: oklch(7% 0.1  var(--neutral-hue));
  --shadow-color-dark:  oklch(3% 0.03 var(--neutral-hue));
}

/* ---------- scheme mapping ---------- */

:root,
.light,
[color-scheme=light] {
  color-scheme: light;
  --color-color-0:  var(--color-light-color-0);
  --color-color-1:  var(--color-light-color-1);
  --color-color-2:  var(--color-light-color-2);
  --color-color-3:  var(--color-light-color-3);
  --color-color-4:  var(--color-light-color-4);
  --color-color-5:  var(--color-light-color-5);
  --color-color-6:  var(--color-light-color-6);
  --color-color-7:  var(--color-light-color-7);
  --color-color-8:  var(--color-light-color-8);
  --color-color-9:  var(--color-light-color-9);
  --color-color-10: var(--color-light-color-10);
  --color-color-11: var(--color-light-color-11);
  --color-neutral-1:  var(--color-light-neutral-1);
  --color-neutral-2:  var(--color-light-neutral-2);
  --color-neutral-3:  var(--color-light-neutral-3);
  --color-neutral-4:  var(--color-light-neutral-4);
  --color-neutral-5:  var(--color-light-neutral-5);
  --color-neutral-6:  var(--color-light-neutral-6);
  --color-neutral-7:  var(--color-light-neutral-7);
  --color-neutral-8:  var(--color-light-neutral-8);
  --color-neutral-9:  var(--color-light-neutral-9);
  --color-neutral-10: var(--color-light-neutral-10);
  --shadow-color: var(--shadow-color-light);
  --contrast-color: black;
  --contrast-color-mix-percent: 10%;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-color-0:  var(--color-dark-color-0);
    --color-color-1:  var(--color-dark-color-1);
    --color-color-2:  var(--color-dark-color-2);
    --color-color-3:  var(--color-dark-color-3);
    --color-color-4:  var(--color-dark-color-4);
    --color-color-5:  var(--color-dark-color-5);
    --color-color-6:  var(--color-dark-color-6);
    --color-color-7:  var(--color-dark-color-7);
    --color-color-8:  var(--color-dark-color-8);
    --color-color-9:  var(--color-dark-color-9);
    --color-color-10: var(--color-dark-color-10);
    --color-color-11: var(--color-dark-color-11);
    --color-neutral-1:  var(--color-dark-neutral-1);
    --color-neutral-2:  var(--color-dark-neutral-2);
    --color-neutral-3:  var(--color-dark-neutral-3);
    --color-neutral-4:  var(--color-dark-neutral-4);
    --color-neutral-5:  var(--color-dark-neutral-5);
    --color-neutral-6:  var(--color-dark-neutral-6);
    --color-neutral-7:  var(--color-dark-neutral-7);
    --color-neutral-8:  var(--color-dark-neutral-8);
    --color-neutral-9:  var(--color-dark-neutral-9);
    --color-neutral-10: var(--color-dark-neutral-10);
    --shadow-color: var(--shadow-color-dark);
    --contrast-color: white;
    --contrast-color-mix-percent: 5%;
  }
}

.dark,
[color-scheme=dark] {
  color-scheme: dark;
  --color-color-0:  var(--color-dark-color-0);
  --color-color-1:  var(--color-dark-color-1);
  --color-color-2:  var(--color-dark-color-2);
  --color-color-3:  var(--color-dark-color-3);
  --color-color-4:  var(--color-dark-color-4);
  --color-color-5:  var(--color-dark-color-5);
  --color-color-6:  var(--color-dark-color-6);
  --color-color-7:  var(--color-dark-color-7);
  --color-color-8:  var(--color-dark-color-8);
  --color-color-9:  var(--color-dark-color-9);
  --color-color-10: var(--color-dark-color-10);
  --color-color-11: var(--color-dark-color-11);
  --color-neutral-1:  var(--color-dark-neutral-1);
  --color-neutral-2:  var(--color-dark-neutral-2);
  --color-neutral-3:  var(--color-dark-neutral-3);
  --color-neutral-4:  var(--color-dark-neutral-4);
  --color-neutral-5:  var(--color-dark-neutral-5);
  --color-neutral-6:  var(--color-dark-neutral-6);
  --color-neutral-7:  var(--color-dark-neutral-7);
  --color-neutral-8:  var(--color-dark-neutral-8);
  --color-neutral-9:  var(--color-dark-neutral-9);
  --color-neutral-10: var(--color-dark-neutral-10);
  --shadow-color: var(--shadow-color-dark);
  --contrast-color: white;
  --contrast-color-mix-percent: 5%;
}