:root {
  --una-primary-hex: #ca8a04;
  --una-primary-50: 254, 252, 232;
  --una-primary-100: 254, 249, 195;
  --una-primary-200: 254, 240, 138;
  --una-primary-300: 253, 224, 71;
  --una-primary-400: 250, 204, 21;
  --una-primary-500: 234, 179, 8;
  --una-primary-600: 202, 138, 4;
  --una-primary-700: 161, 98, 7;
  --una-primary-800: 133, 77, 14;
  --una-primary-900: 113, 63, 18;
  --una-primary-950: 66, 32, 6;
  --una-gray-hex: #57534e;
  --una-gray-50: 250, 250, 249;
  --una-gray-100: 245, 245, 244;
  --una-gray-200: 231, 229, 228;
  --una-gray-300: 214, 211, 209;
  --una-gray-400: 168, 162, 158;
  --una-gray-500: 120, 113, 108;
  --una-gray-600: 87, 83, 78;
  --una-gray-700: 68, 64, 60;
  --una-gray-800: 41, 37, 36;
  --una-gray-900: 28, 25, 23;
  --una-gray-950: 12, 10, 9;
}

:root {
  --c-gray-0: rgb(255 255 255);
  --c-gray-50: rgb(var(--una-gray-50));
  --c-gray-100: rgb(var(--una-gray-100));
  --c-gray-200: rgb(var(--una-gray-200));
  --c-gray-300: rgb(var(--una-gray-300));
  --c-gray-400: rgb(var(--una-gray-400));
  --c-gray-500: rgb(var(--una-gray-500));
  --c-gray-600: rgb(var(--una-gray-600));
  --c-gray-700: rgb(var(--una-gray-700));
  --c-gray-800: rgb(var(--una-gray-800));
  --c-gray-900: rgb(var(--una-gray-900));
  --c-gray-950: rgb(var(--una-gray-950));
}

.dark {
  --c-gray-0: rgb(var(--una-gray-950));
  --c-gray-50: rgb(var(--una-gray-900));
  --c-gray-100: rgb(var(--una-gray-800));
  --c-gray-200: rgb(var(--una-gray-700));
  --c-gray-300: rgb(var(--una-gray-600));
  --c-gray-400: rgb(var(--una-gray-500));
  --c-gray-500: rgb(var(--una-gray-400));
  --c-gray-600: rgb(var(--una-gray-300));
  --c-gray-700: rgb(var(--una-gray-200));
  --c-gray-800: rgb(var(--una-gray-100));
  --c-gray-900: rgb(var(--una-gray-50));
  --c-gray-950: rgb(255 255 255);
}

:root {
  --una-font-size: 16px;
  --una-radius: 0.5rem;
  --una-brand: var(--una-primary-600);
  --una-primary: var(--una-primary-600);
  --una-primary-active: var(--una-primary-500);
  --una-gray: var(--una-gray-600);
  --una-gray-active: var(--una-gray-500);
  --una-background: 255, 255, 255;
  --una-foreground: var(--una-gray-950);
  --una-input: var(--una-gray-200);
  --c-background: rgb(var(--una-background));
  --c-foreground: rgb(var(--una-foreground));
  --c-muted: rgb(var(--una-gray-100));
  --c-muted-foreground: rgb(var(--una-gray-500));
  --c-accent: rgb(var(--una-gray-100));
  --c-accent-foreground: rgb(var(--una-gray-800));
  --c-popover: rgb(255, 255, 255);
  --c-popover-foreground: rgb(var(--una-gray-950));
  --c-border: rgb(var(--una-gray-200));
  --c-border-foreground: rgba(var(--una-gray-700), 0.58);
  --c-ring: rgb(var(--una-gray-200));
  --c-divider: rgb(var(--una-gray-200));
  --c-bg-selection: rgba(var(--una-primary-600), 0.2);
  --un-default-border-color: var(--c-border);
  --una-sidebar: var(--una-background);
  --una-sidebar-foreground: var(--una-foreground);
  --una-sidebar-primary: var(--una-primary);
  --una-sidebar-primary-foreground: var(--una-background);
  --una-sidebar-accent: var(--una-gray-100);
  --una-sidebar-accent-foreground: var(--una-gray-800);
  --una-sidebar-border: var(--una-gray-200);
  --una-sidebar-ring: var(--una-gray-200);
}

.dark {
  --una-brand: var(--una-primary-500);
  --una-primary: var(--una-primary-500);
  --una-primary-active: var(--una-primary-400);
  --una-gray: var(--una-gray-500);
  --una-gray-active: var(--una-gray-400);
  --una-background: var(--una-gray-950);
  --una-foreground: 255, 255, 255;
  --una-input: var(--una-gray-800);
  --c-background: rgb(var(--una-background));
  --c-foreground: rgb(var(--una-foreground));
  --c-muted: rgb(var(--una-gray-800));
  --c-muted-foreground: rgb(var(--una-gray-400));
  --c-accent: rgb(var(--una-gray-800));
  --c-accent-foreground: rgb(var(--una-gray-50));
  --c-popover: rgb(var(--una-gray-950));
  --c-popover-foreground: rgb(255, 255, 255);
  --c-border: rgba(var(--una-gray-700), 0.58);
  --c-border-foreground: rgb(var(--una-gray-200));
  --c-ring: rgba(var(--una-gray-700), 0.58);
  --c-divider: rgba(var(--una-gray-700), 0.58);
  --c-bg-selection: rgba(var(--una-primary-500), 0.2);
  --una-sidebar-accent: var(--una-gray-800);
  --una-sidebar-accent-foreground: var(--una-gray-100);
  --una-sidebar-border: var(--una-gray-700);
  --una-sidebar-ring: var(--una-gray-700);
}

html {
  font-size: var(--una-font-size, 16px);
  --at-apply: font-sans antialiased text-foreground bg-background;
}

html.dark {
  color-scheme: dark;
}

::-moz-selection {
  background: var(--c-bg-selection);
}

::selection {
  background: var(--c-bg-selection);
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
  scrollbar-color: rgba(136, 136, 136, 0.3333333333) var(--c-border);
}

::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar:horizontal {
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  background: var(--c-border);
  border-radius: var(--una-radius);
}

::-webkit-scrollbar-thumb {
  background: var(--c-muted-foreground);
  border-radius: calc(var(--una-radius) - 4px);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-muted) !important;
}