:root {
  /** Base colors */
  --clr-dark-a0: #121212;
  --clr-dark-a0-alpha: oklch(from var(--clr-dark-a0) l c h / 0.9);
  --clr-dark-a10: #000000;
  --clr-dark-a10-alpha: oklch(from var(--clr-dark-a10) l c h / 0.9);
  --clr-light-a0: #eeeeee;
  --clr-light-a0-alpha: oklch(from var(--clr-light-a0) l c h / 0.9);
  --clr-light-a10: #ffffff;
  --clr-light-a10-alpha: oklch(from var(--clr-light-a10) l c h / 0.9);

  /* these arent used anywhere but the theme generator made them,
  maybe the use isn't obvious, we'll keep them awhile longer */
  /* Theme primary colors */
  /*--clr-primary-a0: #0582ff;
  --clr-primary-a10: #4b8fff;
  --clr-primary-a20: #6c9cff;
  --clr-primary-a30: #86a9ff;
  --clr-primary-a40: #9db7ff; */

  /* Theme surface colors */
  /* --clr-surface-a0: #121212;
  --clr-surface-a10: #282828;
  --clr-surface-a20: #3f3f3f;
  --clr-surface-a30: #575757;
  --clr-surface-a40: #717171; */

  /** Theme tonal surface colors */
  --clr-surface-tonal-a0: #191c26;
  --clr-surface-tonal-a0-alpha: oklch(from var(--clr-surface-tonal-a0) l c h / 0.9);
  --clr-surface-tonal-a10: #2e313a;
  --clr-surface-tonal-a10-bright: oklch(from var(--clr-surface-tonal-a10) calc(l + 0.1) c h);
  --clr-surface-tonal-a10-alpha: oklch(from var(--clr-surface-tonal-a10) l c h / 0.9);
  --clr-surface-tonal-a20: #454750;
  --clr-surface-tonal-a20-bright: oklch(from var(--clr-surface-tonal-a20) calc(l + 0.1) c h);
  --clr-surface-tonal-a20-alpha: oklch(from var(--clr-surface-tonal-a20) l c h / 0.9);
  --clr-surface-tonal-a30: #5d5f67;
  --clr-surface-tonal-a30-alpha: oklch(from var(--clr-surface-tonal-a30) l c h / 0.9);
  --clr-surface-tonal-a40: #76777e;
  --clr-surface-tonal-a40-alpha: oklch(from var(--clr-surface-tonal-a40) l c h / 0.9);

  /** Success colors */
  --clr-success-a0: #22946e;
  --clr-success-a0-alpha: oklch(from var(--clr-success-a0) l c h / 0.9);
  --clr-success-a10: #47d5a6;
  --clr-success-a10-alpha: oklch(from var(--clr-success-a10) l c h / 0.9);
  --clr-success-a20: #9ae8ce;
  --clr-success-a20-alpha: oklch(from var(--clr-success-a20) l c h / 0.9);

  /** Warning colors */
  --clr-warning-a0: #a87a2a;
  --clr-warning-a0-bright: oklch(from var(--clr-warning-a0) calc(l + 0.1) c h);
  --clr-warning-a0-alpha: oklch(from var(--clr-warning-a0) l c h / 0.9);
  --clr-warning-a10: #d7ac61;
  --clr-warning-a10-alpha: oklch(from var(--clr-warning-a10) l c h / 0.9);
  --clr-warning-a20: #ecd7b2;
  --clr-warning-a20-alpha: oklch(from var(--clr-warning-a20) l c h / 0.9);

  /** Danger colors */
  --clr-danger-a0: #9c2121;
  --clar-danger-a0-bright: oklch(from var(--clr-danger-a0) calc(l + 0.1) c h);
  --clr-danger-a0-alpha: oklch(from var(--clr-danger-a0) l c h / 0.9);
  --clr-danger-a10: #d94a4a;
  --clr-danger-a10-alpha: oklch(from var(--clr-danger-a10) l c h / 0.9);
  --clr-danger-a20: #eb9e9e;
  --clr-danger-a20-alpha: oklch(from var(--clr-danger-a20) l c h / 0.9);

  /** Info colors */
  --clr-info-a0: #21498a;
  --clr-info-a0-bright: oklch(from var(--clr-info-a0) calc(l + 0.1) c h);
  --clr-info-a0-alpha: oklch(from var(--clr-info-a0) l c h / 0.9);
  --clr-info-a10: #4077d1;
  --clr-info-a10-alpha: oklch(from var(--clr-info-a10) l c h / 0.9);
  --clr-info-a20: #92b2e5;
  --clr-info-a20-alpha: oklch(from var(--clr-info-a20) l c h / 0.9);

  /* Border radius */
  --border-radius: 6px;
}