@layer base {
  :root,
  :host {
    /* Neutrals */
    --color-black: #1a1a1a;
    --color-grey-950: #242829;
    --color-grey-900: #3d4142;
    --color-grey-850: #4c5051;
    --color-grey-800: #5b5f60;
    --color-grey-700: #797d7e;
    --color-grey-600: #8d9192;
    --color-grey-500: #b2b2b2;
    --color-grey-400: #b5b9ba;
    --color-grey-300: #d3d7d8;
    --color-grey-200: #dde1e2;
    --color-grey-100: #e7ebeb;
    --color-grey-50: #f1f5f6;
    --color-white: #ffffff;

    /* Feedback */
    --color-fbk-info: #0270a0;
    --color-fbk-info-subtle: #329acb;
    --color-fbk-info-surface-light: #d7f3ff;
    --color-fbk-info-surface-dark: #1a5a6e;

    --color-fbk-warn: #cb9126;
    --color-fbk-warn-subtle: #e9af44;
    --color-fbk-warn-surface-light: #f7e5c4;
    --color-fbk-warn-surface-dark: #5c4422;

    --color-fbk-success: #2c7f2e;
    --color-fbk-success-subtle: #67b167;
    --color-fbk-success-surface-light: #cee2ce;
    --color-fbk-success-surface-dark: #2d5a3d;

    --color-fbk-danger: #cf2c2d;
    --color-fbk-danger-subtle: #f56262;
    --color-fbk-danger-surface-light: #f6d7d7;
    --color-fbk-danger-surface-dark: #5c3333;

    /* Misc */
    --color-purple: #800080;
    --color-purple-subtle: #e46ee4;
    --color-juke: #9747ff;
    --color-blue: #009bf5;
    --color-blue-subtle: #1fa5f5;
  }
}

@layer base {
  :root,
  :host {
    /* Main Colors */
    --color-main: var(--color-black);
    --color-main-hover: var(--color-grey-800);
    --color-subtle: var(--color-grey-800);
    --color-alt: var(--color-white);
    --color-rev: var(--color-white);
    --color-alt-rev: var(--color-black);
    --color-muted: var(--color-grey-200);
    --color-decorative: var(--color-grey-400);

    --color-info: var(--color-fbk-info);
    --color-info-rev: var(--color-fbk-info-subtle);
    --color-warn: var(--color-fbk-warn);
    --color-warn-rev: var(--color-fbk-warn-subtle);
    --color-success: var(--color-fbk-success);
    --color-success-rev: var(--color-fbk-success-subtle);
    --color-error: var(--color-fbk-danger);
    --color-error-rev: var(--color-fbk-danger-subtle);

    /* Surface Colors */
    --color-surface-neutral: var(--color-white);
    --color-surface-neutral-hover: var(--color-grey-50);
    --color-surface-selected: var(--color-grey-800);
    --color-surface-selected-hover: var(--color-grey-900);
    --color-surface-primary: var(--color-grey-50);
    --color-surface-secondary: var(--color-black);
    --color-surface-tertiary: var(--color-grey-950);
    --color-surface-shimmer: var(--color-white);
    --color-surface-info: var(--color-fbk-info-surface-light);
    --color-surface-warn: var(--color-fbk-warn-surface-light);
    --color-surface-success: var(--color-fbk-success-surface-light);
    --color-surface-error: var(--color-fbk-danger-surface-light);
    --color-surface-muted: var(--color-grey-500);

    /* Borders */
    --color-bdr-subtle: var(--color-grey-500);
    --color-bdr-soft: var(--color-grey-200);
    --color-bdr-strong: var(--color-black);
    --color-bdr-select: var(--color-blue);

    /* Outline Ring */
    --color-ring: var(--color-black);
    --color-ring-alt: var(--color-white);
    --color-ring-offset: var(--color-white);
    --color-ring-offset-alt: var(--color-grey-950);

    /* Buttons */
    --color-btn-primary: var(--color-white);
    --color-btn-primary-hover: var(--color-grey-50);
    --color-btn-secondary: var(--color-grey-50);
    --color-btn-secondary-hover: var(--color-grey-100);
    --color-btn-tertiary: var(--color-black);
    --color-btn-tertiary-hover: var(--color-grey-900);
    --color-btn-active: var(--color-grey-800);
    --color-btn-active-hover: var(--color-grey-900);

    /* Inputs */
    --color-input-disabled: var(--color-grey-100);

    /*Links*/
    --color-link-visited: var(--color-purple);

    /* Tooltips */
    --color-tooltip: var(--color-black);
    --color-tooltip-foreground: var(--color-white);

    /* Avatar */
    --color-avatar-fallback: var(--color-black);

    /* Overlay */
    --color-overlay: oklch(0 0 0 / 0.4);

    /* Documentation */
    --color-docs: var(--color-juke);
  }
}

@layer base {
  .dark,
  :host(.dark) {
    /* Main Colors */
    --color-main: var(--color-white);
    --color-main-hover: var(--color-grey-200);
    --color-subtle: var(--color-grey-400);
    --color-alt: var(--color-white);
    --color-rev: var(--color-black);
    --color-alt-rev: var(--color-black);
    --color-muted: var(--color-grey-800);
    --color-decorative: var(--color-grey-700);

    --color-info: var(--color-fbk-info-subtle);
    --color-info-rev: var(--color-fbk-info);
    --color-warn: var(--color-fbk-warn-subtle);
    --color-warn-rev: var(--color-fbk-warn);
    --color-success: var(--color-fbk-success-subtle);
    --color-success-rev: var(--color-fbk-success);
    --color-error: var(--color-fbk-danger-subtle);
    --color-error-rev: var(--color-fbk-danger);

    /* Surface Colors */
    --color-surface-neutral: var(--color-grey-950);
    --color-surface-neutral-hover: var(--color-grey-900);
    --color-surface-selected: var(--color-grey-800);
    --color-surface-selected-hover: var(--color-grey-900);
    --color-surface-primary: var(--color-grey-900);
    --color-surface-secondary: var(--color-grey-700);
    --color-surface-tertiary: var(--color-grey-900);
    --color-surface-shimmer: var(--color-grey-850);
    --color-surface-info: var(--color-fbk-info-surface-dark);
    --color-surface-warn: var(--color-fbk-warn-surface-dark);
    --color-surface-success: var(--color-fbk-success-surface-dark);
    --color-surface-error: var(--color-fbk-danger-surface-dark);
    --color-surface-muted: var(--color-grey-500);

    /* Borders */
    --color-bdr-subtle: var(--color-grey-800);
    --color-bdr-soft: var(--color-grey-800);
    --color-bdr-strong: var(--color-white);
    --color-bdr-select: var(--color-blue-subtle);

    /* Outline Ring */
    --color-ring: var(--color-white);
    --color-ring-alt: var(--color-white);
    --color-ring-offset: var(--color-grey-950);
    --color-ring-offset-alt: var(--color-grey-950);

    /* Buttons */
    --color-btn-primary: var(--color-grey-950);
    --color-btn-primary-hover: var(--color-grey-900);
    --color-btn-secondary: var(--color-grey-900);
    --color-btn-secondary-hover: var(--color-grey-800);
    --color-btn-tertiary: var(--color-grey-800);
    --color-btn-tertiary-hover: var(--color-grey-700);
    --color-btn-active: var(--color-grey-800);
    --color-btn-active-hover: var(--color-grey-700);

    /* Inputs */
    --color-input-disabled: var(--color-grey-800);

    /*Links*/
    --color-link-visited: var(--color-purple-subtle);

    /* Tooltips */
    --color-tooltip: var(--color-grey-800);
    --color-tooltip-foreground: var(--color-white);

    /* Avatar */
    --color-avatar-fallback: var(--color-grey-800);

    /* Overlay */
    --color-overlay: oklch(0 0 0 / 0.6);

    /* Documentation */
    --color-docs: var(--color-juke);
  }
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* COLORS */
  /* Main Colors */
  --color-main: var(--color-main);
  --color-main-hover: var(--color-main-hover);
  --color-subtle: var(--color-subtle);
  --color-alt: var(--color-alt);
  --color-rev: var(--color-rev);
  --color-alt-rev: var(--color-alt-rev);
  --color-muted: var(--color-muted);
  --color-decorative: var(--color-decorative);

  --color-info: var(--color-info);
  --color-info-rev: var(--color-info-rev);
  --color-warn: var(--color-warn);
  --color-warn-rev: var(--color-warn-rev);
  --color-success: var(--color-success);
  --color-success-rev: var(--color-success-rev);
  --color-error: var(--color-error);
  --color-error-rev: var(--color-error-rev);

  /* Surface Colors */
  --color-surface-neutral: var(--color-surface-neutral);
  --color-surface-neutral-hover: var(--color-surface-neutral-hover);
  --color-surface-selected: var(--color-surface-selected);
  --color-surface-selected-hover: var(--color-surface-selected-hover);
  --color-surface-primary: var(--color-surface-primary);
  --color-surface-secondary: var(--color-surface-secondary);
  --color-surface-tertiary: var(--color-surface-tertiary);
  --color-surface-shimmer: var(--color-surface-shimmer);
  --color-surface-info: var(--color-surface-info);
  --color-surface-warn: var(--color-surface-warn);
  --color-surface-success: var(--color-surface-success);
  --color-surface-error: var(--color-surface-error);
  --color-surface-muted: var(--color-surface-muted);

  /* Borders */
  --color-bdr-subtle: var(--color-bdr-subtle);
  --color-bdr-soft: var(--color-bdr-soft);
  --color-bdr-strong: var(--color-bdr-strong);
  --color-bdr-select: var(--color-bdr-select);

  /* Outline Ring */
  --color-ring: var(--color-ring);
  --color-ring-offset: var(--color-ring-offset);

  /* Buttons */
  --color-btn-primary: var(--color-btn-primary);
  --color-btn-primary-hover: var(--color-btn-primary-hover);
  --color-btn-secondary: var(--color-btn-secondary);
  --color-btn-secondary-hover: var(--color-btn-secondary-hover);
  --color-btn-tertiary: var(--color-btn-tertiary);
  --color-btn-tertiary-hover: var(--color-btn-tertiary-hover);
  --color-btn-active: var(--color-btn-active);
  --color-btn-active-hover: var(--color-btn-active-hover);
  --color-btn-error: var(--color-fbk-danger);
  --color-btn-error-hover: color-mix(in srgb, var(--color-fbk-danger), black 10%);
  --color-btn-error-active: color-mix(in srgb, var(--color-fbk-danger), black 19%);

  /* Inputs */
  --color-input-disabled: var(--color-input-disabled);

  /*Links*/
  --color-link-visited: var(--color-link-visited);

  /* Tooltips */
  --color-tooltip: var(--color-tooltip);
  --color-tooltip-foreground: var(--color-tooltip-foreground);

  /* Avatars */
  --color-avatar-fallback: var(--color-avatar-fallback);

  /* Overlay */
  --color-overlay: var(--color-overlay);

  /* Documentation */
  --color-docs: var(--color-docs);

  /* SIZINGS */
  --sizing-11\.5: calc(var(--spacing) * 11.5);
}

@layer base {
  :root,
  :host {
    font-size: 16px;
    color: var(--color-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility transition-highlight {
  transition-property: color, box-shadow;
  transition-duration: 100ms;
}

@keyframes skeleton-shimmer {
  0% {
    background-position-x: calc(-1 * var(--shimmer-band-size, 200px));
  }
  100% {
    background-position-x: calc(var(--shimmer-end, 100%) + var(--shimmer-band-size, 200px));
  }
}

@utility animate-skeleton-shimmer {
  --shimmer-band-size: 200px;
  background-image: linear-gradient(90deg, transparent 0%, var(--color-surface-neutral-hover) 50%, transparent 100%);
  background-size: var(--shimmer-band-size) 100%;
  background-repeat: no-repeat;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  opacity: 0;
  &[data-ready='true'] {
    opacity: 1;
  }
}

@keyframes input-blink-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bdr-select) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@utility input-animated-border {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background-color: var(--color-bdr-subtle);
    background-image: linear-gradient(90deg, transparent 0%, var(--color-bdr-select) 50%, transparent 100%);
    background-size: var(--shimmer-band-size, 200px) 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }
}

@utility input-blink-attention {
  animation: input-blink-ring 0.6s ease-out 2;
  /* Doubled `:focus-within` bumps specificity above Tailwind's `focus-within:ring-*` so the blink ring isn't fighting the focus ring during the animation. */
  &:focus-within:focus-within {
    box-shadow: none;
  }
}