<style>
  /* theme colors */
  :root {
    --base-luminance: 20%;
    --base-chroma: 0.01;
    --base-hue: 275deg;

    --theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));

    --theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
    --theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
    --theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
    --theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
    --theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
    --theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
    --theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
    --theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
    --theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
    --theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
    --theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
    --theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
    --theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
    --theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
    --theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
    --theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
    --theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
    --theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
    --theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
  }

  /* semantic color variables for this project */
  :root {
    --clr-page-background: var(--theme-c-primary-100);
    --clr-text: var(--theme-c-primary-900);

    --clr-nav-background: var(--theme-c-primary-200);
    --clr-nav-border: var(--theme-c-primary-250);
    --clr-nav-link-hover: var(--theme-c-primary-400);

    --clr-box-background: var(--theme-c-primary-150);
    --clr-box-border: var(--theme-c-primary-250);
    --clr-box-shadow: var(--theme-c-primary-200);
    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);

    --clr-color-box-background: var(--theme-c-primary-200);

    --clr-quick-info-bg-start: var(--theme-c-primary-100);
    --clr-quick-info-bg-end: var(--theme-c-primary-150);

    @media (prefers-color-scheme: dark) {
      --clr-page-background: var(--theme-c-primary-850);
      --clr-text: var(--theme-c-primary-100);

      --clr-nav-background: var(--theme-c-primary-700);
      --clr-nav-border: var(--theme-c-primary-650);
      --clr-nav-link-hover: var(--theme-c-primary-500);

      --clr-box-background: var(--theme-c-primary-750);
      --clr-box-border: var(--theme-c-primary-700);
      --clr-box-shadow: var(--theme-c-primary-800);

      --clr-color-box-background: var(--theme-c-primary-700);

      --clr-quick-info-bg-start: var(--theme-c-primary-700);
      --clr-quick-info-bg-end: var(--theme-c-primary-750);
    }
  }

  .sebin {
    --clr-accent-1: oklch(58% 0.16 33deg); /* scales */
    --clr-accent-2: oklch(78% 0.13 68deg); /* chest */
    --clr-accent-3: oklch(49% 0.08 265deg); /* hair */
    --clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
    --clr-accent-5: oklch(36% 0.01 17deg); /* horns */
    --clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */

    --clr-selection: var(--clr-accent-1);
    --clr-selection-text: var(--theme-c-primary-100);
    --clr-nav-link-active: var(--clr-accent-1);
    --clr-heading-underline: var(--clr-accent-1);
    --clr-heading-data: var(--clr-accent-1);
    --clr-link: var(--clr-accent-1);
    --clr-link-underline: var(--clr-accent-1);
    --clr-gallery-indicator: var(--clr-accent-1);
  }

  .viktor {
    --clr-accent-1: oklch(85% 0.04 56deg); /* front */
    --clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
    --clr-accent-3: oklch(30% 0.04 22deg); /* back main */
    --clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
    --clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
    --clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
    --clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
    --clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */

    --clr-selection: var(--clr-accent-8);
    --clr-selection-text: var(--theme-c-primary-100);
    --clr-nav-link-active: var(--clr-accent-8);
    --clr-heading-underline: var(--clr-accent-8);
    --clr-heading-data: var(--clr-accent-8);
    --clr-link: var(--clr-accent-8);
    --clr-link-underline: var(--clr-accent-8);
    --clr-timeline-stroke: var(--clr-accent-8);
    --clr-gallery-indicator: var(--clr-accent-8);

    @media (prefers-color-scheme: light) {
      --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
    }
  }

  .jarek {
    --clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
    --clr-accent-2: oklch(56% 0.1 98deg); /* mane */
    --clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
    --clr-accent-4: oklch(81% 0.07 74deg); /* horn */
    --clr-accent-5: oklch(84% 0.07 111deg); /* trii */
    --clr-accent-6: oklch(69% 0.12 95deg); /* naughty */

    --clr-selection: var(--clr-accent-1);
    --clr-selection-text: var(--theme-c-primary-100);
    --clr-nav-link-active: var(--clr-accent-1);
    --clr-heading-underline: var(--clr-accent-1);
    --clr-heading-data: var(--clr-accent-1);
    --clr-link: var(--clr-accent-1);
    --clr-link-underline: var(--clr-accent-1);
    --clr-gallery-indicator: var(--clr-accent-1);
  }
</style>
