:root {
  --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%);

  --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-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-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-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-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-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%);

  --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: var(--error-40);
  --on-error: var(--error-100);
  --error-container: var(--error-90);
  --on-error-container: var(--error-10);

  --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);
}

[data-theme="dark"] {
  --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: var(--error-80);
  --on-error: var(--error-20);
  --error-container: var(--error-30);
  --on-error-container: var(--error-90);

  --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);
}

:root {
  --page-max: 1440px;
  --content-max: 760px;
  --surface-raised: color-mix(
    in srgb,
    var(--surface) 86%,
    var(--primary-container)
  );
  --surface-accent: color-mix(in srgb, var(--primary) 8%, var(--surface));
  --line-soft: color-mix(in srgb, var(--outline) 18%, transparent);
  --shadow-1: 0 10px 30px color-mix(in srgb, var(--scrim) 14%, transparent);
  --shadow-2: 0 20px 50px color-mix(in srgb, var(--scrim) 18%, transparent);
  --hero-overlay: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, black 68%, transparent) 100%
  );
}

html[data-theme="dark"] {
  --paper: hsl(calc(var(--seed-h) + 8) 16% 10%);
  --paper-2: hsl(calc(var(--seed-h) + 8) 14% 13%);
  --ink: hsl(0 0% 96%);
  --accent: hsl(var(--seed-h) 88% 66%);
  --hi: hsl(var(--seed-h) 92% 34%);
  --hi-2: hsl(calc(var(--seed-h) + 170) 70% 34%);
  --background: hsl(calc(var(--seed-h) + 10) 16% 8%);
  --surface: hsl(calc(var(--seed-h) + 10) 14% 10%);
  --surface-dim: hsl(calc(var(--seed-h) + 10) 12% 14%);
  --surface-container: hsl(calc(var(--seed-h) + 10) 12% 16%);
  --surface-container-high: hsl(calc(var(--seed-h) + 10) 12% 19%);
  --surface-container-highest: hsl(calc(var(--seed-h) + 10) 12% 23%);
  --on-background: hsl(0 0% 96%);
  --on-surface: hsl(0 0% 96%);
  --on-surface-variant: hsl(0 0% 78%);
  --outline: hsl(var(--seed-h) 18% 58%);
  --outline-variant: hsl(var(--seed-h) 14% 28%);
  --primary: hsl(var(--seed-h) 84% 72%);
  --primary-container: hsl(var(--seed-h) 65% 22%);
  --on-primary-container: hsl(0 0% 98%);
  --secondary-container: hsl(var(--seed-h) 28% 20%);
  --tertiary-container: hsl(calc(var(--seed-h) + 60) 35% 20%);
  --surface-raised: color-mix(
    in srgb,
    var(--surface) 82%,
    var(--primary-container)
  );
  --surface-accent: color-mix(in srgb, var(--surface) 82%, var(--primary) 18%);
  --line-soft: color-mix(in srgb, var(--outline) 28%, transparent);
  --shadow-1: 0 16px 40px color-mix(in srgb, black 38%, transparent);
  --shadow-2: 0 24px 60px color-mix(in srgb, black 44%, transparent);
  --hero-overlay: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, black 78%, transparent) 100%
  );
}