:root {
  --codeplot-color-white: 0, 0%, 100%;
  --codeplot-color-yellow: 43, 65%, 50%;

  --codeplot-color-surface: 0, 0%, 100%;
  --codeplot-color-surface1: 0, 0%, 16%;
  --codeplot-color-surface2: 0, 0%, 22%;
  --codeplot-color-surface3: 0, 0%, 27%;

  --codeplot-surface-backgroundColor: hsla(var(--codeplot-color-surface), 1);
  --codeplot-surface-color: hsla(var(--codeplot-color-white), 80%);

  --codeplot-surface2-backgroundColor: hsla(
    var(--codeplot-color-surface2),
    100%
  );
  --codeplot-surface2-backgroundColorOnHover: hsla(
    var(--codeplot-color-surface2),
    100%
  );
  --codeplot-surface2-color: hsla(var(--codeplot-color-white), 80%);
  --codeplot-surface2-border-color: hsla(var(--codeplot-color-surface3), 100%);

  --codeplot-color-primary: var(--codeplot-color-yellow);
  --codeplot-color-onPrimary: 0, 0%, 0%;
  --codeplot-color-primaryContainer: 0, 0%, 100%;
  --codeplot-color-onPrimaryContainer: 0, 0%, 100%;

  --codeplot-radius-none: 0px;
  --codeplot-radius-sm: 2px;
  --codeplot-radius-md: 4px;
  --codeplot-radius-lg: 8px;
  --codeplot-radius-xl: 12px;
  --codeplot-radius-full: 50%;

  --codeplot-strokeWidth-none: 0px;
  --codeplot-strokeWidth-thin: 1px;
  --codeplot-strokeWidth-thick: 2px;
  --codeplot-strokeWidth-thicker: 3px;
  --codeplot-strokeWidth-thickest: 4px;

  --codeplot-typography-title3-fontWeight: 500;
  --codeplot-typography-title3-fontSize: 24px;
  --codeplot-typography-title3-lineHeight: 32px;

  --codeplot-typography-body-fontWeight: 400;
  --codeplot-typography-body-fontSize: 14px;
  --codeplot-typography-body-lineHeight: 20px;

  --codeplot-fontFamily-default: -apple-system, "system-ui", Segoe UI, Noto Sans,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --codeplot-fontFamily-mono: "DM Mono";
  --codeplot-fontFamily-sans: "Inter";

  /* ---------------------------------- Body ---------------------------------- */

  --codeplot-body-backgroundColor: var(--codeplot-color-surface);
  --codeplot-body-color: var(--codeplot-surface-color);

  /* ------------------------------ ExternalLink ------------------------------ */

  --codeplot-ExternalLink-color: hsla(var(--codeplot-color-primary), 100%);
  --codeplot-ExternalLink-colorOnHover: hsla(
    var(--codeplot-color-primary),
    80%
  );
  --codeplot-ExternalLink-colorOnActive: hsla(
    var(--codeplot-color-primary),
    95%
  );
  --codeplot-ExternalLink_Arrow-color: hsla(
    var(--codeplot-color-primary),
    100%
  );

  /* ------------------------------ Link ------------------------------ */

  --codeplot-Link-color: hsla(var(--codeplot-color-primary), 100%);
  --codeplot-Link-colorOnHover: hsla(var(--codeplot-color-primary), 80%);
  --codeplot-Link-colorOnActive: hsla(var(--codeplot-color-primary), 95%);

  /* --------------------------------- Button --------------------------------- */
  --codeplot-Button-radius: var(--codeplot-radius-md);
}

:root[data-theme="default"][data-theme-color="dark"] {
  --codeplot-color-white: 0, 0%, 100%;
  --codeplot-color-yellow: 43, 65%, 50%;

  --codeplot-color-surface: 0, 0%, 13%;
  --codeplot-color-surface1: 0, 0%, 16%;
  --codeplot-color-surface2: 0, 0%, 20%;
  --codeplot-color-surface3: 0, 0%, 25%;

  --codeplot-surface-backgroundColor: hsla(var(--codeplot-color-surface), 1);
  --codeplot-surface-color: hsla(var(--codeplot-color-white), 80%);

  --codeplot-surface2-backgroundColor: hsla(
    var(--codeplot-color-surface2),
    100%
  );

  --codeplot-surface2-backgroundColorOnHover: hsla(
    var(--codeplot-color-surface2),
    100%
  );

  --codeplot-surface3-backgroundColor: hsla(
    var(--codeplot-color-surface3),
    100%
  );
  --codeplot-surface2-backgroundColorOnHover: hsla(
    var(--codeplot-color-surface3),
    100%
  );

  --codeplot-color-primary: var(--codeplot-color-yellow);
  --codeplot-color-onPrimary: 0, 0%, 0%;
  --codeplot-color-primaryContainer: 0, 0%, 100%;
  --codeplot-color-onPrimaryContainer: 0, 0%, 100%;
}
