/* we use the oklch color space */
/* mix color with: color-mix(in oklch, var(--primary-color) 30%, var(--color-button-bg) 70%); */

:root {
  /* Constants (don't change with theme) */
  --lch-white: 100% 0.007 97.38;
  --lch-black: 0% 0.007 97.38;

  --color-text-light: oklch(95% 0.007 97.38);
  --color-text-dark: oklch(15% 0.007 97.38);

  /* OKLCH colors: Dark mode (default) */
  --lch-canvas: 20% 0.007 97.38;
  --lch-ink-inverted: var(--lch-black);

  --lch-gray-lightest: 90% 0.007 97.38;
  --lch-gray-lighter: 80% 0.007 97.38;
  --lch-gray-light: 70% 0.007 97.38;
  --lch-gray-medium: 50% 0.007 97.38;
  --lch-gray-dark: 35% 0.007 97.38;
  --lch-gray-darker: 30% 0.007 97.38;
  --lch-gray-darkest: 25% 0.007 97.38;

  --lch-primary: 0.6754 0.0846 170.99;

  --lch-red: 70% 0.15 29.5;
  --lch-green: 60% 0.15 142.5;
  --lch-blue: 60% 0.15 264.5;
  --lch-orange: 0.7581 0.1509 89.42;
  --lch-yellow: 90% 0.1509 90.42;

  /* Colors: Named */
  --color-white: oklch(var(--lch-white));
  --color-black: oklch(var(--lch-black));

  --color-red: oklch(var(--lch-red));
  --color-green: oklch(var(--lch-green));
  --color-blue: oklch(var(--lch-blue));
  --color-orange: oklch(var(--lch-orange));
  --color-yellow: oklch(var(--lch-yellow));

  /* Colors: Semantic */
  --color-bg: oklch(var(--lch-canvas));
  --color-text: oklch(var(--lch-gray-lightest));
  --color-text-inverted: oklch(var(--lch-ink-inverted));

  --color-border: oklch(var(--lch-gray-dark));

  --panel-bg: oklch(var(--lch-gray-darker));
  --panel-bg-secondary: color-mix(in oklch, var(--panel-bg) 50%, var(--color-bg) 50%);
  --input-bg: oklch(var(--lch-gray-dark));

  --primary-color: oklch(var(--lch-primary));
  --primary-color-text: var(--color-text-dark);

  --nav-link-bg: var(--panel-bg);
  --nav-link-hover-bg: var(--input-bg);
  --nav-link-active-bg: var(--primary-color);

  --color-button-bg: oklch(var(--lch-gray-dark));

  --label-bg: oklch(var(--lch-gray-dark));
}

/* Light theme */
html[data-theme="light"] {
  --lch-canvas: 80.4% 0.007 97.38;
  --lch-ink-inverted: var(--lch-white);

  --lch-gray-lightest: 90% 0.007 97.38;
  --lch-gray-lighter: 85% 0.007 97.38;
  --lch-gray-light: 80% 0.007 97.38;
  --lch-gray-medium: 50% 0.007 97.38;
  --lch-gray-dark: 75% 0.007 97.38;
  --lch-gray-darker: 70% 0.007 97.38;
  --lch-gray-darkest: 20% 0.007 97.38;

  --color-text: oklch(var(--lch-gray-darkest));
}