/* theme colors */
:root {
  --theme-c-night: oklch(0.19 0.0081 274.48);
  --theme-c-eerie-black: oklch(0.23 0.0116 274.38);
  --theme-c-raisin-black: oklch(0.27 0.0148 274.31);
  --theme-c-gunmetal: oklch(0.31 0.0179 274.27);
  --theme-c-onyx: oklch(0.35 0.0209 274.23);

  --theme-c-text-light: oklch(0.26 0.0381 19.99);
  --theme-c-text-dark: oklch(0.95 0.0234 69.6);
}

/* semantic color variables for this project */
:root {
  --clr-page-background: oklch(from var(--theme-c-night) calc(l * 4.75) c h);
  --clr-text: var(--theme-c-text-light);

  --clr-nav-background: oklch(from var(--theme-c-raisin-black) calc(l * 2.75) c h);

  --clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
  --clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);

  --clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);

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

    --clr-nav-background: var(--theme-c-raisin-black);

    --clr-box-background: var(--theme-c-eerie-black);
    --clr-box-border: var(--theme-c-onyx);

    --clr-color-box-background: var(--theme-c-gunmetal);
  }
}

.sebin {
  --clr-accent-1: oklch(0.58 0.1607 32.69); /* scales */
  --clr-accent-2: oklch(0.78 0.1261 68.88); /* chest */
  --clr-accent-3: oklch(0.49 0.08 265.23); /* hair */
  --clr-accent-4: oklch(0.71 0.2289 141.29); /* eyes */
  --clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
  --clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */

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

.viktor {
  --clr-accent-1: oklch(0.95 0.0234 69.6);
  --clr-accent-2: oklch(0.85 0.0471 56.52);
  --clr-accent-3: oklch(0.35 0.0365 50.88);
  --clr-accent-4: oklch(0.3 0.0477 22.3);
  --clr-accent-5: oklch(0.26 0.0381 19.99);
  --clr-accent-6: oklch(0.9 0.0705 199.31);
  --clr-accent-7: oklch(0.75 0.0912 228.1);
  --clr-accent-8: oklch(0.71 0.0848 236.58);
  --clr-accent-9: oklch(0.4 0.0437 228.49);

  --clr-nav-link-active: var(--clr-accent-7);
  --clr-heading-underline: var(--clr-accent-7);
  --clr-heading-data: var(--clr-accent-7);
  --clr-link: var(--clr-accent-7);
  --clr-link-underline: var(--clr-accent-7);
  --clr-timeline-stroke: var(--clr-accent-7);
}

.jarek {
  --clr-accent-1: oklch(0.69 0.11 71.52);
  --clr-accent-2: oklch(0.56 0.1 98.83);
  --clr-accent-3: oklch(0.76 0.03 112.98);
  --clr-accent-4: oklch(0.81 0.07 74.77);
  --clr-accent-5: oklch(0.69 0.12 95.34);

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