/* ------------------------------ */
/* ------------ Retro ----------- */
/* ------------------------------ */

@layer utilities {
  :root[data-theme="theme-retro"] {
    .rounded {
      border-radius: var(--radius-ui);
    }

    .before\:rounded:before,
    .after\:rounded:after {
      border-radius: inherit;
    }
  }
}

:root[data-theme="theme-retro"],
[data-theme="theme-retro"] {
  --radius-ui: 0;
  --radius-full: 0;
  --radius-4xl: 0;
  --radius-3xl: 0;
  --radius-2xl: 0;
  --radius-xl: 0;
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --radius-xs: 0;

  --background-1: var(--color-neutral-50);
  --background-2: var(--color-neutral-100);
  --foreground: var(--color-neutral-800);

  --inverse: var(--color-neutral-800);

  --border: var(--color-neutral-800);
  --border-line-1: var(--color-neutral-800);
  --border-line-2: var(--color-neutral-800);
  --border-line-3: var(--color-neutral-800);
  --border-line-4: var(--color-neutral-800);
  --border-line-5: var(--color-neutral-800);
  --border-line-6: var(--color-neutral-800);
  --border-line-7: var(--color-neutral-800);
  --border-line-8: var(--color-neutral-800);

  --primary-50: var(--color-fuchsia-50);
  --primary-100: var(--color-fuchsia-100);
  --primary-200: var(--color-fuchsia-200);
  --primary-300: var(--color-fuchsia-300);
  --primary-400: var(--color-fuchsia-400);
  --primary-500: var(--color-fuchsia-500);
  --primary-600: var(--color-fuchsia-600);
  --primary-700: var(--color-fuchsia-700);
  --primary-800: var(--color-fuchsia-800);
  --primary-900: var(--color-fuchsia-900);
  --primary-950: var(--color-fuchsia-950);

  --primary: var(--color-primary-500);
  --primary-line: var(--color-neutral-800);
  --primary-hover: var(--color-primary-600);
  --primary-focus: var(--color-primary-600);
  --primary-active: var(--color-primary-600);
  --primary-checked: var(--color-primary-500);

  --secondary: var(--color-neutral-900);
  --secondary-hover: var(--color-neutral-800);
  --secondary-focus: var(--color-neutral-800);
  --secondary-active: var(--color-neutral-800);

  --layer-line: var(--color-neutral-800);
  --layer-foreground: var(--color-neutral-800);
  --layer-hover: var(--color-neutral-50);
  --layer-focus: var(--color-neutral-50);
  --layer-active: var(--color-neutral-50);

  --surface: var(--color-neutral-100);
  --surface-1: var(--color-neutral-200);
  --surface-2: var(--color-neutral-300);
  --surface-3: var(--color-neutral-400);
  --surface-4: var(--color-neutral-500);
  --surface-5: var(--color-neutral-600);
  --surface-foreground: var(--color-neutral-800);
  --surface-hover: var(--color-neutral-200);
  --surface-focus: var(--color-neutral-200);
  --surface-active: var(--color-neutral-200);

  --muted: var(--color-neutral-50);
  --muted-foreground: var(--color-neutral-400);
  --muted-foreground-1: var(--color-neutral-500);
  --muted-foreground-2: var(--color-neutral-600);
  --muted-hover: var(--color-neutral-100);
  --muted-focus: var(--color-neutral-100);
  --muted-active: var(--color-neutral-100);

  --navbar-line: var(--color-neutral-800);
  --navbar-divider: var(--color-neutral-800);
  --navbar-nav-foreground: var(--color-neutral-800);
  --navbar-nav-hover: var(--color-neutral-100);
  --navbar-nav-focus: var(--color-neutral-100);
  --navbar-nav-active: var(--color-neutral-100);
  --navbar-nav-list-divider: var(--color-neutral-800);
  --navbar-inverse: var(--color-primary-950);

  --navbar-1: var(--color-neutral-50);
  --navbar-1-line: var(--color-neutral-800);
  --navbar-1-divider: var(--color-neutral-800);
  --navbar-1-nav-foreground: var(--color-neutral-800);
  --navbar-1-nav-hover: var(--color-neutral-200);
  --navbar-1-nav-focus: var(--color-neutral-200);
  --navbar-1-nav-active: var(--color-neutral-200);
  --navbar-1-nav-list-divider: var(--color-neutral-800);

  --navbar-2: var(--color-neutral-100);
  --navbar-2-divider: var(--color-neutral-300);
  --navbar-2-nav-foreground: var(--color-neutral-800);
  --navbar-2-nav-hover: var(--color-neutral-200);
  --navbar-2-nav-focus: var(--color-neutral-200);
  --navbar-2-nav-active: var(--color-neutral-200);
  --navbar-2-nav-list-divider: var(--color-neutral-800);
  
  --sidebar-line: var(--color-neutral-800);
  --sidebar-divider: var(--color-neutral-800);
  --sidebar-nav-foreground: var(--color-neutral-800);
  --sidebar-nav-hover: var(--color-neutral-100);
  --sidebar-nav-focus: var(--color-neutral-100);
  --sidebar-nav-active: var(--color-neutral-100);
  --sidebar-nav-list-divider: var(--color-neutral-800);
  --sidebar-inverse: var(--color-primary-950);
  
  --sidebar-1: var(--color-neutral-50);
  --sidebar-1-line: var(--color-neutral-800);
  --sidebar-1-divider: var(--color-neutral-800);
  --sidebar-1-nav-foreground: var(--color-neutral-800);
  --sidebar-1-nav-hover: var(--color-neutral-200);
  --sidebar-1-nav-focus: var(--color-neutral-200);
  --sidebar-1-nav-active: var(--color-neutral-200);
  --sidebar-1-nav-list-divider: var(--color-neutral-800);
  
  --sidebar-2: var(--color-neutral-100);
  --sidebar-2-divider: var(--color-neutral-800);
  --sidebar-2-nav-foreground: var(--color-neutral-800);
  --sidebar-2-nav-hover: var(--color-neutral-200);
  --sidebar-2-nav-focus: var(--color-neutral-200);
  --sidebar-2-nav-active: var(--color-neutral-200);
  --sidebar-2-nav-list-divider: var(--color-neutral-800);

  --card-line: var(--color-neutral-800);
  --card-divider: var(--color-neutral-800);
  --card-header: var(--color-neutral-800);
  --card-footer: var(--color-neutral-800);
  --card-inverse: var(--color-primary-950);

  --dropdown-line: var(--color-neutral-800);
  --dropdown-divider: var(--color-neutral-800);
  --dropdown-header: var(--color-neutral-800);
  --dropdown-footer: var(--color-neutral-800);
  --dropdown-item-foreground: var(--color-neutral-800);
  --dropdown-item-hover: var(--color-neutral-100);
  --dropdown-item-focus: var(--color-neutral-100);
  --dropdown-item-active: var(--color-neutral-100);
  --dropdown-inverse: var(--color-primary-950);
  
  --select-line: var(--color-neutral-800);
  --select-item-foreground: var(--color-neutral-800);
  --select-item-hover: var(--color-neutral-100);
  --select-item-focus: var(--color-neutral-100);
  --select-item-active: var(--color-neutral-100);
  --select-inverse: var(--color-primary-950);
  
  --overlay-line: var(--color-neutral-800);
  --overlay-divider: var(--color-neutral-800);
  --overlay-header: var(--color-neutral-800);
  --overlay-footer: var(--color-neutral-800);
  --overlay-inverse: var(--color-primary-950);
  
  --popover-line: var(--color-neutral-800);

  --table-line: var(--color-neutral-800);

  --footer-line: var(--color-neutral-800);
  --footer-inverse: var(--color-primary-950);

  --scrollbar-track: var(--color-neutral-100);
  --scrollbar-thumb: var(--color-neutral-300);

  --chart-colors-background-inverse: var(--color-neutral-800);
  --chart-colors-foreground: var(--color-neutral-800);
  --chart-primary: var(--color-primary-500);
  --chart-colors-primary: var(--color-primary-500);
  --chart-colors-primary-inverse: var(--color-primary-500);
  --chart-colors-primary-hex: var(--color-primary-500);
  --chart-colors-primary-hex-inverse: var(--color-primary-500);
  --chart-1: var(--color-primary-50);
  --chart-colors-chart-1: var(--color-primary-50);
  --chart-colors-chart-1-inverse: var(--color-primary-50);
  --chart-colors-chart-1-hex: var(--color-primary-50);
  --chart-colors-chart-1-hex-inverse: var(--color-primary-50);
  --chart-2: var(--color-primary-200);
  --chart-colors-chart-2: var(--color-primary-200);
  --chart-colors-chart-2-inverse: var(--color-primary-200);
  --chart-colors-chart-2-hex: var(--color-primary-200);
  --chart-colors-chart-2-hex-inverse: var(--color-primary-200);
  --chart-3: var(--color-primary-400);
  --chart-colors-chart-3: var(--color-primary-400);
  --chart-colors-chart-3-inverse: var(--color-primary-400);
  --chart-colors-chart-3-hex: var(--color-primary-400);
  --chart-colors-chart-3-hex-inverse: var(--color-primary-400);
  --chart-4: var(--color-primary-800);
  --chart-colors-chart-4: var(--color-primary-800);
  --chart-colors-chart-4-inverse: var(--color-primary-800);
  --chart-colors-chart-4-hex: var(--color-primary-800);
  --chart-colors-chart-4-hex-inverse: var(--color-primary-800);
  --chart-5: var(--color-teal-400);
  --chart-colors-chart-5: var(--color-teal-400);
  --chart-colors-chart-5-inverse: var(--color-teal-400);
  --chart-colors-chart-5-hex: var(--color-teal-400);
  --chart-colors-chart-5-hex-inverse: var(--color-teal-400);
  --chart-6: var(--color-violet-600);
  --chart-colors-chart-6: var(--color-violet-600);
  --chart-colors-chart-6-inverse: var(--color-violet-600);
  --chart-colors-chart-6-hex: var(--color-violet-600);
  --chart-colors-chart-6-hex-inverse: var(--color-violet-600);
  --chart-7: var(--color-blue-400);
  --chart-colors-chart-7: var(--color-blue-400);
  --chart-colors-chart-7-inverse: var(--color-blue-400);
  --chart-colors-chart-7-hex: var(--color-blue-400);
  --chart-colors-chart-7-hex-inverse: var(--color-blue-400);
  --chart-8: var(--color-neutral-100);
  --chart-colors-chart-8: var(--color-neutral-100);
  --chart-colors-chart-8-inverse: var(--color-neutral-700);
  --chart-colors-chart-8-hex: var(--color-neutral-100);
  --chart-colors-chart-8-hex-inverse: var(--color-neutral-700);
  --chart-9: var(--color-neutral-200);
  --chart-colors-chart-9: var(--color-neutral-200);
  --chart-colors-chart-9-inverse: var(--color-neutral-500);
  --chart-colors-chart-9-hex: var(--color-neutral-200);
  --chart-colors-chart-9-hex-inverse: var(--color-neutral-500);
  --chart-10: var(--color-neutral-300);
  --chart-colors-chart-10: var(--color-neutral-300);
  --chart-colors-chart-10-inverse: var(--color-neutral-700);
  --chart-colors-chart-10-hex: var(--color-neutral-300);
  --chart-colors-chart-10-hex-inverse: var(--color-neutral-700);
  --chart-colors-candlestick-upward: var(--color-primary-500);
  --chart-colors-candlestick-upward-inverse: var(--color-primary-500);
  --chart-colors-candlestick-downward: var(--color-primary-500);
  --chart-colors-candlestick-downward-inverse: var(--color-primary-500);
  --chart-colors-labels: var(--color-neutral-400);
  --chart-colors-labels-inverse: var(--color-neutral-400);
  --chart-colors-xaxis-labels: var(--color-neutral-400);
  --chart-colors-xaxis-labels-inverse: var(--color-neutral-400);
  --chart-colors-yaxis-labels: var(--color-neutral-400);
  --chart-colors-yaxis-labels-inverse: var(--color-neutral-400);
  --chart-colors-grid-border: var(--color-neutral-400);
  --chart-colors-grid-border-inverse: var(--color-neutral-700);
  --chart-colors-bar-ranges: var(--color-neutral-200);

  --map-colors-primary: var(--color-primary-600);
  --map-colors-primary-inverse: var(--color-primary-500);
  --map-colors-default: var(--color-neutral-300);
  --map-colors-default-inverse: var(--color-neutral-600);
  --map-colors-highlight: var(--color-primary-300);
  --map-colors-highlight-inverse: var(--color-primary-300);
  --map-colors-border: var(--color-neutral-100);
  --map-colors-border-inverse: var(--color-neutral-800);
}

[data-theme="theme-retro"].dark {
  --background: var(--color-neutral-800);
  --background-1: var(--color-neutral-900);
  --background-2: var(--color-neutral-900);
  --foreground: var(--color-neutral-200);

  --inverse: var(--color-neutral-950);

  --border: var(--color-neutral-400);
  --border-line-1: var(--color-neutral-400);
  --border-line-2: var(--color-neutral-400);
  --border-line-3: var(--color-neutral-400);
  --border-line-4: var(--color-neutral-400);
  --border-line-5: var(--color-neutral-400);
  --border-line-6: var(--color-neutral-400);
  --border-line-7: var(--color-neutral-400);
  --border-line-8: var(--color-neutral-400);

  --primary: var(--color-primary-500);
  --primary-line: var(--color-neutral-400);
  --primary-hover: var(--color-primary-600);
  --primary-focus: var(--color-primary-600);
  --primary-active: var(--color-primary-600);
  --primary-checked: var(--color-primary-500);

  --secondary: var(--color-white);
  --secondary-hover: var(--color-neutral-100);
  --secondary-focus: var(--color-neutral-100);
  --secondary-active: var(--color-neutral-100);

  --layer: var(--color-neutral-800);
  --layer-line: var(--color-neutral-400);
  --layer-foreground: var(--color-white);
  --layer-hover: var(--color-neutral-700);
  --layer-focus: var(--color-neutral-700);
  --layer-active: var(--color-neutral-700);

  --surface: var(--color-neutral-700);
  --surface-1: var(--color-neutral-600);
  --surface-2: var(--color-neutral-500);
  --surface-3: var(--color-neutral-600);
  --surface-4: var(--color-neutral-500);
  --surface-5: var(--color-neutral-400);
  --surface-foreground: var(--color-neutral-200);
  --surface-hover: var(--color-neutral-600);
  --surface-focus: var(--color-neutral-600);
  --surface-active: var(--color-neutral-600);

  --muted: var(--color-neutral-800);
  --muted-foreground: var(--color-neutral-500);
  --muted-foreground-1: var(--color-neutral-400);
  --muted-foreground-2: var(--color-neutral-300);
  --muted-hover: var(--color-neutral-700);
  --muted-focus: var(--color-neutral-700);
  --muted-active: var(--color-neutral-700);

  --navbar: var(--color-neutral-800);
  --navbar-line: var(--color-neutral-400);
  --navbar-divider: var(--color-neutral-400);
  --navbar-nav-foreground: var(--color-neutral-200);
  --navbar-nav-hover: var(--color-neutral-700);
  --navbar-nav-focus: var(--color-neutral-700);
  --navbar-nav-active: var(--color-neutral-700);
  --navbar-nav-list-divider: var(--color-neutral-400);
  --navbar-inverse: var(--color-black);
  
  --navbar-1: var(--color-neutral-900);
  --navbar-1-line: var(--color-neutral-400);
  --navbar-1-divider: var(--color-neutral-400);
  --navbar-1-nav-foreground: var(--color-neutral-200);
  --navbar-1-nav-hover: var(--color-neutral-700);
  --navbar-1-nav-focus: var(--color-neutral-700);
  --navbar-1-nav-active: var(--color-neutral-700);
  --navbar-1-nav-list-divider: var(--color-neutral-400);

  --navbar-2: var(--color-neutral-900);
  --navbar-2-divider: var(--color-neutral-400);
  --navbar-2-nav-foreground: var(--color-neutral-200);
  --navbar-2-nav-hover: var(--color-neutral-800);
  --navbar-2-nav-focus: var(--color-neutral-800);
  --navbar-2-nav-active: var(--color-neutral-800);
  --navbar-2-nav-list-divider: var(--color-neutral-800);

  --sidebar: var(--color-neutral-800);
  --sidebar-line: var(--color-neutral-400);
  --sidebar-divider: var(--color-neutral-400);
  --sidebar-nav-foreground: var(--color-neutral-200);
  --sidebar-nav-hover: var(--color-neutral-700);
  --sidebar-nav-focus: var(--color-neutral-700);
  --sidebar-nav-active: var(--color-neutral-700);
  --sidebar-nav-list-divider: var(--color-neutral-400);
  --sidebar-inverse: var(--color-black);

  --sidebar-1: var(--color-neutral-900);
  --sidebar-1-line: var(--color-neutral-400);
  --sidebar-1-divider: var(--color-neutral-400);
  --sidebar-1-nav-foreground: var(--color-neutral-200);
  --sidebar-1-nav-hover: var(--color-neutral-700);
  --sidebar-1-nav-focus: var(--color-neutral-700);
  --sidebar-1-nav-active: var(--color-neutral-700);
  --sidebar-1-nav-list-divider: var(--color-neutral-400);
  
  --sidebar-2: var(--color-neutral-900);
  --sidebar-2-divider: var(--color-neutral-800);
  --sidebar-2-nav-foreground: var(--color-neutral-200);
  --sidebar-2-nav-hover: var(--color-neutral-800);
  --sidebar-2-nav-focus: var(--color-neutral-800);
  --sidebar-2-nav-active: var(--color-neutral-800);
  --sidebar-2-nav-list-divider: var(--color-neutral-800);

  --card: var(--color-neutral-800);
  --card-line: var(--color-neutral-400);
  --card-divider: var(--color-neutral-400);
  --card-header: var(--color-neutral-400);
  --card-footer: var(--color-neutral-400);
  --card-inverse: var(--color-black);

  --dropdown: var(--color-neutral-900);
  --dropdown-1: var(--color-neutral-950);
  --dropdown-line: var(--color-neutral-400);
  --dropdown-divider: var(--color-neutral-400);
  --dropdown-header: var(--color-neutral-400);
  --dropdown-footer: var(--color-neutral-400);
  --dropdown-item-foreground: var(--color-neutral-200);
  --dropdown-item-hover: var(--color-neutral-800);
  --dropdown-item-focus: var(--color-neutral-800);
  --dropdown-item-active: var(--color-neutral-800);
  --dropdown-inverse: var(--color-black);

  --select: var(--color-neutral-900);
  --select-1: var(--color-neutral-950);
  --select-line: var(--color-neutral-400);
  --select-item-foreground: var(--color-neutral-200);
  --select-item-hover: var(--color-neutral-800);
  --select-item-focus: var(--color-neutral-800);
  --select-item-active: var(--color-neutral-800);
  --select-inverse: var(--color-black);
  
  --overlay: var(--color-neutral-800);
  --overlay-line: var(--color-neutral-400);
  --overlay-divider: var(--color-neutral-400);
  --overlay-header: var(--color-neutral-400);
  --overlay-footer: var(--color-neutral-400);
  --overlay-inverse: var(--color-black);

  --popover: var(--color-neutral-900);
  --popover-line: var(--color-neutral-400);

  --table-line: var(--color-neutral-400);

  --footer: var(--color-neutral-800);
  --footer-line: var(--color-neutral-400);
  --footer-inverse: var(--color-black);
  
  --scrollbar-track: var(--color-neutral-700);
  --scrollbar-thumb: var(--color-neutral-500);
  --scrollbar-track-inverse: var(--color-neutral-500);
  --scrollbar-thumb-inverse: var(--color-neutral-700);

  --chart-7: var(--color-blue-500);
  --chart-8: var(--color-neutral-700);
  --chart-9: var(--color-neutral-500);
  --chart-10: var(--color-neutral-700);
}