/* $bg: #c0bfba
$neutral-light: #cccbc7
$neutral-lighter: #dbd7d4
$almond: #D6BD98
$matcha: #677D6A
$forest: #40534C
$eclipse: #2E3532 */


:root {
  --lch-gray-lighter: 90.4% 0.007 97.38;
  --lch-gray-light: 85.4% 0.007 97.38;
  --lch-gray: 80.4% 0.007 97.38;
  --lch-gray-dark: 75% 0.007 97.38;
  --lch-gray-darker: 70% 0.007 97.38;

  --primary-color: oklch(56.64% 0.0387 148.9);

  --lch-red: 60% 0.1 29.5;
  --lch-green: 60% 0.1 142.5;
  --lch-blue: 60% 0.1 264.5;
  --lch-orange: 60% 0.1 74.5;

  --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-bg: oklch(var(--lch-gray));

  --color-text: oklch(20% 0.01 97.38);
  --color-text-inverted:  var(--color-bg);

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

  --panel-bg: oklch(var(--lch-gray-dark));
  --input-bg: oklch(var(--lch-gray-darker));

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

  --color-button-bg: var(--color-bg);

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