@import url("/assets/lib/colors/hues.oklch-01f632b0.css");
/* this imports the actual palette coords */
@import url("/assets/lib/colors/teal-cd9fce90.css");
@import url("/assets/lib/colors/palette.oklch-6ec41a2e.css");

:where(:root) {
  --canvas: light-dark(var(--color-white, Canvas), var(--color-16, CanvasText));
  --canvas-text: light-dark(var(--color-15, CanvasText), var(--color-2, Canvas));
  --light-text: light-dark(var(--color-8, CanvasText), var(--color-7, Canvas));
  --surface-1: light-dark(var(--color-3), var(--color-14));
  --surface-2: light-dark(var(--color-4), var(--color-12));
  --surface-3: light-dark(var(--color-5), var(--color-11));
  --surface-light-1: #f8f8f8; /* light-dark(oklch(from var(--color-1) l 0.00 h),oklch(from var(--color-14) l 0.00 h)); */
  --surface-light-2: light-dark(oklch(from var(--color-2) l 0.00 h),oklch(from var(--color-13) l 0.00 h));

  --well-1: light-dark(var(--color-6), var(--color-10));
  --well-2: light-dark(var(--color-7), var(--color-9));
  --well-text: light-dark(var(--color-16, CanvasText), var(--color-1, Canvas));

  --field: light-dark(var(--color2), var(--color-15));
  --field-text: light-dark(var(--color-15, CanvasText), var(--color-2));

  /*
   * gray
   * in absolute terms, this would be:
   * light-dark(oklch(58%, .0042, 7), oklch(66%, .004, 7))
   */
  --gray-text: light-dark(oklch(from var(--color-8) l 0.0042 h), oklch(from var(--color-7) l 0.004 h));

  /* blue */
  --color-blue: light-dark(
    oklch(from var(--color-10) l 0.19 var(--oklch-blue)),
    oklch(from var(--color-5) l 0.16 var(--oklch-blue))
  );
  --link-text: var(--color-blue);

  /* purple */
  --color-purple: light-dark(
    oklch(from var(--color-11) l 0.17 var(--oklch-purple)),
    oklch(from var(--color-6) l 0.19 var(--oklch-purple))
  );
  --visited-text: var(--color-purple);

  /* red */
  --color-red: light-dark(
    oklch(from var(--color-10) l 0.19 var(--oklch-red)),
    oklch(from var(--color-8) l 0.21 var(--oklch-red))
  );
  --active-text: var(--color-red);

  /* dark red */
  --color-dark-red: light-dark(oklch(from var(--color-red) 35% 0.15 h), oklch(from var(--color-red) 49% 0.19 h));
  --color-dimmed-dark-red: oklch(from var(--color-dark-red) l 0.1 h);

  /* light-blue */
  --color-light-blue: light-dark(
    oklch(from var(--color-9) l 0.2 var(--oklch-blue)),
    oklch(from var(--color-7) l 0.16 var(--oklch-blue))
  );
  --accent-color-text: var(--color-1, Canvas);
  --accent-color: var(--color-light-blue);

  /* very light blue */
  --selected-item: light-dark(
    oklch(from var(--color-5) l 0.1 var(--oklch-indigo)),
    oklch(from var(--color-5) l 0.12 var(--oklch-indigo))
  );
  --selected-item-text: var(--color-16, CanvasText);
  --color-very-light-blue: var(--selected-item);

  --highlight: oklch(from var(--selected-item) l c h / 60%);
  --highlight-text: light-dark(var(--color-15, CanvasText), var(--color-16));

  /* yellow */
  --color-yellow: oklch(92% 0.2 100);
  --mark: var(--color-yellow, Mark);
  --mark-text: light-dark(oklch(from var(--mark) 62% c h), var(--mark));

  /* orange */
  --color-orange: oklch(0.83 0.1628 79.89);

  /* green */
  --color-green: oklch(66% 0.2 var(--oklch-green));
  --color-dark-green: oklch(from var(--color-green) 54% 0.15 h);
  --color-dimmed-dark-green: oklch(from var(--color-dark-green) l 0.1 h);
}