/* NEUTRAL TONAL ANALOG */

:root {
 /* SEED */
 --seed-h: 180;
 --seed-s: 80%;

 /* TONAL PALETTES */

 /* Primary */
 --primary-0: hsl(var(--seed-h) var(--seed-s) 0%);
 --primary-10: hsl(var(--seed-h) var(--seed-s) 12%);
 --primary-20: hsl(var(--seed-h) var(--seed-s) 22%);
 --primary-30: hsl(var(--seed-h) var(--seed-s) 30%);
 --primary-40: hsl(var(--seed-h) var(--seed-s) 40%);
 --primary-50: hsl(var(--seed-h) var(--seed-s) 50%);
 --primary-60: hsl(var(--seed-h) var(--seed-s) 60%);
 --primary-70: hsl(var(--seed-h) var(--seed-s) 70%);
 --primary-80: hsl(var(--seed-h) var(--seed-s) 80%);
 --primary-90: hsl(var(--seed-h) var(--seed-s) 90%);
 --primary-95: hsl(var(--seed-h) var(--seed-s) 96%);
 --primary-98: hsl(var(--seed-h) var(--seed-s) 98%);
 --primary-99: hsl(var(--seed-h) var(--seed-s) 99%);
 --primary-100: hsl(var(--seed-h) var(--seed-s) 100%);

 /* Secondary */
 --secondary-0: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 0%);
 --secondary-10: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 12%);
 --secondary-20: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 22%);
 --secondary-30: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 30%);
 --secondary-40: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 40%);
 --secondary-50: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 50%);
 --secondary-60: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 60%);
 --secondary-70: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 70%);
 --secondary-80: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 80%);
 --secondary-90: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 90%);
 --secondary-95: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 96%);
 --secondary-98: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 98%);
 --secondary-99: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 99%);
 --secondary-100: hsl(var(--seed-h) calc(var(--seed-s) * 0.45) 100%);

 /* Tertiary */
 --tertiary-0: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 0%);
 --tertiary-10: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 12%);
 --tertiary-20: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 22%);
 --tertiary-30: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 30%);
 --tertiary-40: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 40%);
 --tertiary-50: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 50%);
 --tertiary-60: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 60%);
 --tertiary-70: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 70%);
 --tertiary-80: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 80%);
 --tertiary-90: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 90%);
 --tertiary-95: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 96%);
 --tertiary-98: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 98%);
 --tertiary-99: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 99%);
 --tertiary-100: hsl(calc(var(--seed-h) + 60) calc(var(--seed-s) * 0.65) 100%);

 /* Neutral */
 --neutral-0: hsl(var(--seed-h) 12% 0%);
 --neutral-4: hsl(var(--seed-h) 12% 4%);
 --neutral-6: hsl(var(--seed-h) 12% 6%);
 --neutral-10: hsl(var(--seed-h) 12% 12%);
 --neutral-12: hsl(var(--seed-h) 12% 14%);
 --neutral-17: hsl(var(--seed-h) 12% 20%);
 --neutral-20: hsl(var(--seed-h) 12% 22%);
 --neutral-22: hsl(var(--seed-h) 12% 24%);
 --neutral-24: hsl(var(--seed-h) 12% 26%);
 --neutral-30: hsl(var(--seed-h) 12% 30%);
 --neutral-40: hsl(var(--seed-h) 12% 40%);
 --neutral-50: hsl(var(--seed-h) 12% 50%);
 --neutral-60: hsl(var(--seed-h) 12% 60%);
 --neutral-70: hsl(var(--seed-h) 12% 70%);
 --neutral-80: hsl(var(--seed-h) 12% 80%);
 --neutral-87: hsl(var(--seed-h) 12% 87%);
 --neutral-90: hsl(var(--seed-h) 12% 90%);
 --neutral-92: hsl(var(--seed-h) 12% 92%);
 --neutral-94: hsl(var(--seed-h) 12% 94%);
 --neutral-95: hsl(var(--seed-h) 12% 96%);
 --neutral-96: hsl(var(--seed-h) 12% 97%);
 --neutral-98: hsl(var(--seed-h) 12% 98%);
 --neutral-99: hsl(var(--seed-h) 12% 99%);
 --neutral-100: hsl(var(--seed-h) 12% 100%);

 /* Neutral variant */
 --neutral-variant-0: hsl(var(--seed-h) 30% 0%);
 --neutral-variant-10: hsl(var(--seed-h) 30% 12%);
 --neutral-variant-20: hsl(var(--seed-h) 30% 22%);
 --neutral-variant-30: hsl(var(--seed-h) 30% 30%);
 --neutral-variant-40: hsl(var(--seed-h) 30% 40%);
 --neutral-variant-50: hsl(var(--seed-h) 30% 50%);
 --neutral-variant-60: hsl(var(--seed-h) 30% 60%);
 --neutral-variant-70: hsl(var(--seed-h) 30% 70%);
 --neutral-variant-80: hsl(var(--seed-h) 30% 80%);
 --neutral-variant-90: hsl(var(--seed-h) 30% 90%);
 --neutral-variant-95: hsl(var(--seed-h) 30% 96%);
 --neutral-variant-98: hsl(var(--seed-h) 30% 98%);
 --neutral-variant-99: hsl(var(--seed-h) 30% 99%);
 --neutral-variant-100: hsl(var(--seed-h) 30% 100%);

 /* Error */
 --error-0: hsl(350 75% 0%);
 --error-10: hsl(350 75% 12%);
 --error-20: hsl(350 75% 22%);
 --error-30: hsl(350 75% 30%);
 --error-40: hsl(350 75% 40%);
 --error-50: hsl(350 75% 50%);
 --error-60: hsl(350 75% 60%);
 --error-70: hsl(350 75% 70%);
 --error-80: hsl(350 75% 80%);
 --error-90: hsl(350 75% 90%);
 --error-95: hsl(350 75% 96%);
 --error-98: hsl(350 75% 98%);
 --error-99: hsl(350 75% 99%);
 --error-100: hsl(350 75% 100%);

 /* LIGHT */

 /* Brand */
 --primary: var(--primary-40);
 --on-primary: var(--primary-100);
 --primary-container: var(--primary-90);
 --on-primary-container: var(--primary-10);

 --primary-fixed: var(--primary-90);
 --primary-fixed-dim: var(--primary-80);
 --on-primary-fixed: var(--primary-10);
 --on-primary-fixed-variant: var(--primary-30);

 --secondary: var(--secondary-40);
 --on-secondary: var(--secondary-100);
 --secondary-container: var(--secondary-90);
 --on-secondary-container: var(--secondary-10);

 --secondary-fixed: var(--secondary-90);
 --secondary-fixed-dim: var(--secondary-80);
 --on-secondary-fixed: var(--secondary-10);
 --on-secondary-fixed-variant: var(--secondary-30);

 --tertiary: var(--tertiary-40);
 --on-tertiary: var(--tertiary-100);
 --tertiary-container: var(--tertiary-90);
 --on-tertiary-container: var(--tertiary-10);

 --tertiary-fixed: var(--tertiary-90);
 --tertiary-fixed-dim: var(--tertiary-80);
 --on-tertiary-fixed: var(--tertiary-10);
 --on-tertiary-fixed-variant: var(--tertiary-30);

 /* Error */
 --error: var(--error-40);
 --on-error: var(--error-100);
 --error-container: var(--error-90);
 --on-error-container: var(--error-10);

 /* Surfaces & background */
 --background: var(--neutral-99);
 --on-background: var(--neutral-10);

 --surface: var(--neutral-98);
 --surface-dim: var(--neutral-87);
 --surface-bright: var(--neutral-98);

 --surface-container-lowest: var(--neutral-100);
 --surface-container-low: var(--neutral-96);
 --surface-container: var(--neutral-94);
 --surface-container-high: var(--neutral-92);
 --surface-container-highest: var(--neutral-90);

 --on-surface: var(--neutral-10);
 --on-surface-variant: var(--neutral-variant-30);

 --outline: var(--neutral-variant-50);
 --outline-variant: var(--neutral-variant-80);

 --shadow: var(--neutral-0);
 --scrim: var(--neutral-0);

 --inverse-surface: var(--neutral-20);
 --inverse-on-surface: var(--neutral-95);
 --inverse-primary: var(--primary-80);
}

/* DARK */
[data-theme="dark"] {
 /* Brand */
 --primary: var(--primary-80);
 --on-primary: var(--primary-20);
 --primary-container: var(--primary-30);
 --on-primary-container: var(--primary-90);

 --primary-fixed: var(--primary-90);
 --primary-fixed-dim: var(--primary-80);
 --on-primary-fixed: var(--primary-10);
 --on-primary-fixed-variant: var(--primary-30);

 --secondary: var(--secondary-80);
 --on-secondary: var(--secondary-20);
 --secondary-container: var(--secondary-30);
 --on-secondary-container: var(--secondary-90);

 --secondary-fixed: var(--secondary-90);
 --secondary-fixed-dim: var(--secondary-80);
 --on-secondary-fixed: var(--secondary-10);
 --on-secondary-fixed-variant: var(--secondary-30);

 --tertiary: var(--tertiary-80);
 --on-tertiary: var(--tertiary-20);
 --tertiary-container: var(--tertiary-30);
 --on-tertiary-container: var(--tertiary-90);

 --tertiary-fixed: var(--tertiary-90);
 --tertiary-fixed-dim: var(--tertiary-80);
 --on-tertiary-fixed: var(--tertiary-10);
 --on-tertiary-fixed-variant: var(--tertiary-30);

 /* Error */
 --error: var(--error-80);
 --on-error: var(--error-20);
 --error-container: var(--error-30);
 --on-error-container: var(--error-90);

 /* Surfaces & background */
 --background: var(--neutral-6);
 --on-background: var(--neutral-90);

 --surface: var(--neutral-6);
 --surface-dim: var(--neutral-6);
 --surface-bright: var(--neutral-24);

 --surface-container-lowest: var(--neutral-4);
 --surface-container-low: var(--neutral-10);
 --surface-container: var(--neutral-12);
 --surface-container-high: var(--neutral-17);
 --surface-container-highest: var(--neutral-22);

 --on-surface: var(--neutral-90);
 --on-surface-variant: var(--neutral-variant-80);

 --outline: var(--neutral-variant-60);
 --outline-variant: var(--neutral-variant-30);

 --shadow: var(--neutral-0);
 --scrim: var(--neutral-0);

 --inverse-surface: var(--neutral-90);
 --inverse-on-surface: var(--neutral-20);
 --inverse-primary: var(--primary-40);
}