/* NEUTRAL TONAL ANALOG */

:root {
 /* SEED */
 --seed-h: 210;
 --seed-s: 90%;

--fx-grid: repeating-linear-gradient(
  90deg,
  color-mix(in srgb, var(--accent) 18%, transparent) 0 1px,
  transparent 1px 28px
),
repeating-linear-gradient(
  0deg,
  color-mix(in srgb, var(--accent) 12%, transparent) 0 1px,
  transparent 1px 28px
);
--fx-scanlines: repeating-linear-gradient(
  0deg,
  rgba(255,255,255,0.06) 0 1px,
  transparent 1px 6px
);
--fx-glow: radial-gradient(
  900px circle at 18% 10%,
  color-mix(in srgb, var(--primary) 22%, transparent) 0%,
  transparent 55%
),
radial-gradient(
  700px circle at 85% 22%,
  color-mix(in srgb, var(--accent) 18%, transparent) 0%,
  transparent 60%
);
--fx-noise: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
            radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
--fx-noise-size: 22px 22px, 28px 28px;

--bg-texture: var(--fx-grid), var(--fx-glow), var(--fx-scanlines), var(--fx-noise);
--surface-texture: var(--fx-grid), var(--fx-noise);

--accent-2: hsl(calc(var(--seed-h) + 160) 92% 56%);

 /* 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 */
 --paper: hsl(0 0% 100%);
 --paper-2: hsl(0 0% 96%);
 --ink: hsl(0 0% 6%);
 --accent: hsl(var(--seed-h) 100% 42%);
 --hi: hsl(var(--seed-h) 100% 72%);
 --hi-2: hsl(calc(var(--seed-h) + 180) 100% 72%);

 --background: var(--paper);
 --on-background: var(--ink);

 --surface: var(--paper);
 --surface-dim: var(--paper-2);
 --surface-bright: var(--paper);

 --surface-container-lowest: color-mix(in srgb, var(--paper) 92%, white);
 --surface-container-low: var(--paper);
 --surface-container: var(--paper-2);
 --surface-container-high: color-mix(in srgb, var(--paper-2) 92%, var(--ink));
 --surface-container-highest: color-mix(in srgb, var(--paper-2) 86%, var(--ink));

 --on-surface: var(--ink);
 --on-surface-variant: color-mix(in srgb, var(--ink) 70%, var(--paper));

 --outline: var(--ink);
 --outline-variant: color-mix(in srgb, var(--ink) 60%, var(--paper));

 --shadow: var(--ink);
 --scrim: var(--ink);
 --on-scrim: var(--paper);

 --inverse-surface: var(--ink);
 --inverse-on-surface: var(--paper);
 --inverse-primary: var(--accent);
}

/* DARK */
[data-theme="dark"] {
 /* Brand */
--fx-scanlines: repeating-linear-gradient(
  0deg,
  rgba(255,255,255,0.04) 0 1px,
  transparent 1px 7px
);
--fx-noise: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
            radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
--fx-noise-size: 26px 26px, 34px 34px;
--accent-2: hsl(calc(var(--seed-h) + 160) 92% 60%);
 --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 */
 --paper: hsl(0 0% 6%);
 --paper-2: hsl(0 0% 10%);
 --ink: hsl(48 35% 94%);
 --accent: hsl(var(--seed-h) 100% 62%);
 --hi: hsl(var(--seed-h) 100% 60%);
 --hi-2: hsl(calc(var(--seed-h) + 180) 100% 60%);

 --background: var(--paper);
 --on-background: var(--ink);

 --surface: var(--paper);
 --surface-dim: var(--paper);
 --surface-bright: var(--paper-2);

 --surface-container-lowest: color-mix(in srgb, var(--paper) 96%, black);
 --surface-container-low: var(--paper);
 --surface-container: var(--paper-2);
 --surface-container-high: color-mix(in srgb, var(--paper-2) 92%, var(--ink));
 --surface-container-highest: color-mix(in srgb, var(--paper-2) 86%, var(--ink));

 --on-surface: var(--ink);
 --on-surface-variant: color-mix(in srgb, var(--ink) 75%, var(--paper));

 --outline: color-mix(in srgb, var(--ink) 35%, var(--paper));
 --outline-variant: color-mix(in srgb, var(--ink) 22%, var(--paper));

 --shadow: black;
 --scrim: black;
 --on-scrim: var(--ink);

 --inverse-surface: var(--ink);
 --inverse-on-surface: var(--paper);
 --inverse-primary: var(--accent);
}