@theme {
  /* Typography --- */
  --font-base:
    system-ui, sans-serif, -apple-system, blinkmacsystemfont, segoe ui, roboto,
    helvetica neue, arial, noto sans;

  /* Screen Breakpoints --- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1536px;

  /* Spacing --- */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-base: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Text Sizing */
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text: 1rem;
  --text--line-height: 1.5rem;
  --text-md: 1.25rem;
  --text-md--line-height: 1.75rem;
  --text-lg: 1.5rem;
  --text-lg--line-height: 2rem;
  --text-xl: 2.25rem;
  --text-xl--line-height: 2.75rem;
  --text-xxl: 3.75rem;
  --text-xxl--line-height: 3.75rem;

  /* Border Radius Sizing */
  --radius-none: 0;
  --radius-sm: 0.07rem;
  --radius: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.365rem;
  --radius-xl: 0.5rem;
  --radius-xxl: 0.75rem;

  /* Border Sizing */
  --border-width-none: 0;
  --border-width: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;
  --border-width-xl: 8px;

  /* Icon Sizing */
  --width-icon-sm: 1rem;
  --width-icon: 1.5rem;
  --width-icon-lg: 2rem;
  --height-icon-sm: 1rem;
  --height-icon: 1.5rem;
  --height-icon-lg: 2rem;

  /* Z-Indices --- */
  --z-sticky: 1000;
  --z-fixed: 1010;
  --z-dropdown: 1020;
  --z-offcanvas: 1030;
  --z-tooltip: 1040;
  --z-backdrop: 1050;
  --z-modal-backdrop: 1050;
  --z-modal: 1060;
  --z-popover: 1070;

  /* Background */
  --color-background: #05050a;

  /* Border */
  --color-border: #28282a;

  /* Surface */
  --color-surface-subtle: #0e0e0f;
  --color-surface: #121214;
  --color-surface-strong: #1c1c1f;

  /* Text */
  --color-text-subtle: #ffffff73;
  --color-text: #ffffffb3;
  --color-text-strong: #fff;
  --color-text-semantic: #fff;

  /* Semantic */
  --color-main-dark: #123054;
  --color-main: #1f5393;
  --color-main-light: #286cbf;
  --color-main-faded: #1f539380;

  --color-neutral-dark: #393f46;
  --color-neutral: #787e87;
  --color-neutral-light: #94989e;
  --color-neutral-faded: #787e8780;

  --color-positive-dark: #0d5938;
  --color-positive: #1f9361;
  --color-positive-light: #2dd28a;
  --color-positive-faded: #1f93614d;

  --color-caution-dark: #936110;
  --color-caution: #d68f1f;
  --color-caution-light: #f6b955;
  --color-caution-faded: #d68f1f4d;

  --color-critical-dark: #451008;
  --color-critical: #bd3c28;
  --color-critical-light: #e5614c;
  --color-critical-faded: #bd3c284d;

  --color-info-dark: #084545;
  --color-info: #249da8;
  --color-info-light: #4ce5e5;
  --color-info-faded: #249da84d;

  /* Scrollbar */
  --color-scrollbar-track: #2e3133;
  --color-scrollbar-thumb: #5b6166;
  --color-scrollbar-thumb-highlight: #666d73;

  /* Input */
  --color-input-background: #40494f;
  --color-input-background-disabled: #4f535a;

  /* Overlay */
  --color-overlay: #0c1114bf;
}

/* Z-Index Utilities */
@utility z-sticky {
  z-index: var(--z-sticky);
}

@utility z-fixed {
  z-index: var(--z-fixed);
}

@utility z-dropdown {
  z-index: var(--z-dropdown);
}

@utility z-offcanvas {
  z-index: var(--z-offcanvas);
}

@utility z-tooltip {
  z-index: var(--z-tooltip);
}

@utility z-backdrop {
  z-index: var(--z-backdrop);
}

@utility z-modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

@utility z-modal {
  z-index: var(--z-modal);
}

@utility z-popover {
  z-index: var(--z-popover);
}

/* Text Color Utilities */
@utility text-color {
  color: var(--color-text);
}

@utility text-color-subtle {
  color: var(--color-text-subtle);
}

@utility text-color-strong {
  color: var(--color-text-strong);
}

@utility text-color-semantic {
  color: var(--color-text-semantic);
}

@utility text-color-main {
  color: var(--color-main);
}

@utility text-color-main-dark {
  color: var(--color-main-dark);
}

@utility text-color-main-light {
  color: var(--color-main-light);
}

@utility text-color-main-faded {
  color: var(--color-main-faded);
}

@utility text-color-neutral {
  color: var(--color-neutral);
}

@utility text-color-neutral-dark {
  color: var(--color-neutral-dark);
}

@utility text-color-neutral-light {
  color: var(--color-neutral-light);
}

@utility text-color-neutral-faded {
  color: var(--color-neutral-faded);
}

@utility text-color-positive {
  color: var(--color-positive);
}

@utility text-color-positive-dark {
  color: var(--color-positive-dark);
}

@utility text-color-positive-light {
  color: var(--color-positive-light);
}

@utility text-color-positive-faded {
  color: var(--color-positive-faded);
}

@utility text-color-caution {
  color: var(--color-caution);
}

@utility text-color-caution-dark {
  color: var(--color-caution-dark);
}

@utility text-color-caution-light {
  color: var(--color-caution-light);
}

@utility text-color-caution-faded {
  color: var(--color-caution-faded);
}

@utility text-color-critical {
  color: var(--color-critical);
}

@utility text-color-critical-dark {
  color: var(--color-critical-dark);
}

@utility text-color-critical-light {
  color: var(--color-critical-light);
}

@utility text-color-critical-faded {
  color: var(--color-critical-faded);
}

@utility text-color-info {
  color: var(--color-info);
}

@utility text-color-info-dark {
  color: var(--color-info-dark);
}

@utility text-color-info-light {
  color: var(--color-info-light);
}

@utility text-color-info-faded {
  color: var(--color-info-faded);
}

@utility break-word {
  word-break: break-word;
}

/*  Typography Prose Plugin color overrides --- */
@utility prose {
  --tw-prose-body: var(--color-text);
  --tw-prose-headings: var(--color-text-strong);
  --tw-prose-lead: var(--color-text-strong);
  --tw-prose-links: var(--color-info);
  --tw-prose-bold: var(--color-text-strong);
  --tw-prose-counters: var(--color-neutral);
  --tw-prose-bullets: var(--color-neutral);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--color-neutral);
  --tw-prose-quote-borders: var(--color-neutral-dark);
  --tw-prose-captions: var(--color-text-subtle);
  --tw-prose-code: var(--color-main);
  --tw-prose-pre-code: var(--color-main-faded);
  --tw-prose-pre-bg: var(--color-surface-subtle);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border);
}

html,
body {
  color: var(--color-text);
  font-size: var(--text);
  line-height: var(--text--line-height);
  background-color: var(--color-background);
}

/*
  This is required for user-agent fullscreen mode in browsers:
  https://stackoverflow.com/questions/16163089/background-element-goes-black-when-entering-fullscreen-with-html5
*/
:fullscreen,
::backdrop {
  background-color: var(--color-background);
}

/* Gecko Scrollbar */
* {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* Blink Scrollbar */
::-webkit-scrollbar {
  width: 14px;
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid rgb(0 0 0 / 0%);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-highlight);
  background-clip: padding-box;
  border: 2px solid rgb(0 0 0 / 0%);
  border-radius: 9999px;
}

::-webkit-scrollbar-corner,
::-webkit-resizer {
  background: var(--color-scrollbar-thumb);
}
