@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);
}