/* SIZE TOKENS IN PIXEL */
body {
  /* BORDER RADIUS */
  --fui-border-radius-xs: 2px;
  --fui-border-radius-s: 3px;
  --fui-border-radius-m: 4px;
  --fui-border-radius-l: 5px;
  /* CONTROL HEIGHT */
  --fui-control-height-s: 24px;
  --fui-control-height-m: 32px;
  --fui-control-height-l: 48px;
  /* ICONS */
  --fui-icon-s: 14px;
  --fui-icon-m: 18px;
  --fui-icon-l: 22px;
  --fui-icon-xl: 28px;
  /* PADDING */
  --fui-padding-xs: 4px;
  --fui-padding-s: 8px;
  --fui-padding-m: 12px;
  --fui-padding-l: 16px;
  --fui-padding-xl: 24px;
  --fui-padding-2xl: 32px;
  --fui-padding-3xl: 40px;
  /* BADGE SIZE */
  --fui-badge-size-s: 6px;
  --fui-badge-size-m: 8px;
  --fui-badge-size-l: 10px;
  /* SPACE */
  --fui-space-xs: 4px;
  --fui-space-s: 8px;
  --fui-space-m: 16px;
  --fui-space-l: 24px;
  --fui-space-xl: 32px;
  --fui-space-2xl: 40px;
  --fui-space-3xl: 48px;
  /* FONT-SIZE */
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  /* HEADING-SIZE */
  --heading-size-h5: 16px;
  --heading-size-h4: 20px;
  --heading-size-h3: 28px;
  --heading-size-h2: 44px;
  --heading-size-h1: 64px;

  /* COMMON COLOR TOKENS */
  /* BLACK */
  --fui-black-palette-50: rgba(17 17 17 / 3%);
  --fui-black-palette-100: rgba(17 17 17 / 5%);
  --fui-black-palette-200: rgba(17 17 17 / 8%);
  --fui-black-palette-300: rgba(17 17 17 / 20%);
  --fui-black-palette-400: rgba(17 17 17 / 40%);
  --fui-black-palette-500: rgba(17 17 17 / 60%);
  --fui-black-palette-600: rgba(17 17 17 / 88%);
  --fui-black-palette-700: #111111;
  --fui-black-palette-800: #090909;
  --fui-black-palette-900: #000000;
  /* WHITE */
  --fui-white-palette-50: rgba(248 248 248 / 3%);
  --fui-white-palette-100: rgba(248 248 248 / 6%);
  --fui-white-palette-200: rgba(248 248 248 / 9%);
  --fui-white-palette-300: rgba(248 248 248 / 14%);
  --fui-white-palette-400: rgba(248 248 248 / 40%);
  --fui-white-palette-500: rgba(248 248 248 / 60%);
  --fui-white-palette-600: rgba(248 248 248 / 80%);
  --fui-white-palette-700: #f8f8f8;
  --fui-white-palette-800: #fcfcfc;
  --fui-white-palette-900: #ffffff;
  /* GREEN */
  --fui-green-palette-700: #52bb77;
  /* RED */
  --fui-red-palette-700: #ff4040;
  /* ORANGE */
  --fui-orange-palette-700: #ffa53e;
  /* VIOLET */
  --fui-violet-palette-700: #9747ff;
  /* BLUE */
  --fui-blue-palette-700: #4791ff;
  /* YELLOW-GREEN */
  --fui-yellow-green-palette-700: #a7db38;

  /* BADGES */
  --color-badge-green: var(--fui-green-palette-700);
  --color-badge-red: var(--fui-red-palette-700);
  --color-badge-orange: var(--fui-orange-palette-700);
  --color-badge-violet: var(--fui-violet-palette-700);
  --color-badge-blue: var(--fui-blue-palette-700);
  --color-badge-yellow-green: var(--fui-yellow-green-palette-700);

  /* LIGHT THEME COLOR TOKENS */
  /* MARKERS */
  --color-marker-green: var(--fui-green-palette-700);
  --color-marker-red: var(--fui-red-palette-700);
  --color-marker-orange: var(--fui-orange-palette-700);
  --color-marker-violet: var(--fui-violet-palette-700);
  --color-marker-blue: var(--fui-blue-palette-700);
  --color-marker-yellow-green: var(--fui-yellow-green-palette-700);
  /* TEXT COLORS */
  --color-text-primary: var(--fui-black-palette-700);
  --color-text-primary-inverse: var(--fui-white-palette-700);
  --color-text-secondary: var(--fui-black-palette-500);
  --color-text-secondary-hover: var(--fui-black-palette-700);
  --color-text-disabled: var(--fui-black-palette-300);
  --color-text-warning: var(--fui-orange-palette-700);
  --color-text-error: var(--fui-red-palette-700);
  --color-text-success: var(--fui-green-palette-700);
  /* BORDER COLORS */
  --color-border-secondary: var(--fui-black-palette-300);
  --color-border-secondary-hover: var(--fui-black-palette-400);
  --color-border-disabled: var(--fui-black-palette-200);
  --color-border-warning: var(--fui-orange-palette-700);
  --color-border-error: var(--fui-red-palette-700);
  --color-border-success: var(--fui-green-palette-700);
  /* BACKGROUND COLORS */
  --color-bg-base: var(--fui-white-palette-700);
  --color-bg-primary: var(--fui-black-palette-700);
  --color-bg-primary-hover: var(--fui-black-palette-600);
  --color-bg-primary-active: var(--fui-black-palette-300);
  --color-bg-secondary: var(--fui-black-palette-100);
  --color-bg-secondary-active: var(--fui-black-palette-300);
  --color-bg-secondary-hover: var(--fui-black-palette-200);
}

/* DARK THEME COLOR TOKENS */
body[data-theme="dark"] {
  /* MARKERS */
  --color-marker-green: var(--fui-green-palette-700);
  --color-marker-red: var(--fui-red-palette-700);
  --color-marker-orange: var(--fui-orange-palette-700);
  --color-marker-violet: var(--fui-violet-palette-700);
  --color-marker-blue: var(--fui-blue-palette-700);
  --color-marker-yellow-green: var(--fui-yellow-green-palette-700);
  /* TEXT COLORS */
  --color-text-primary: var(--fui-white-palette-700);
  --color-text-primary-inverse: var(--fui-black-palette-700);
  --color-text-secondary: var(--fui-white-palette-500);
  --color-text-secondary-hover: var(--fui-white-palette-700);
  --color-text-disabled: var(--fui-white-palette-300);
  --color-text-warning: var(--fui-orange-palette-700);
  --color-text-error: var(--fui-red-palette-700);
  --color-text-success: var(--fui-green-palette-700);
  /* BORDER COLORS */
  --color-border-secondary: var(--fui-white-palette-300);
  --color-border-secondary-hover: var(--fui-white-palette-400);
  --color-border-disabled: var(--fui-white-palette-200);
  --color-border-warning: var(--fui-orange-palette-700);
  --color-border-error: var(--fui-red-palette-700);
  --color-border-success: var(--fui-green-palette-700);
  /* BACKGROUND COLORS */
  --color-bg-base: var(--fui-black-palette-700);
  --color-bg-primary: var(--fui-white-palette-700);
  --color-bg-primary-hover: var(--fui-white-palette-600);
  --color-bg-primary-active: var(--fui-white-palette-300);
  --color-bg-secondary: var(--fui-white-palette-100);
  --color-bg-secondary-active: var(--fui-white-palette-300);
  --color-bg-secondary-hover: var(--fui-white-palette-200);
}

body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  font-size: var(--font-size-m);
  line-height: var(--font-size-m);
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-secondary-hover);
  text-decoration: underline;
}

a:active {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

a:visited {
  color: var(--color-text-secondary);
}

h1 {
  font-size: var(--heading-size-h1);
  line-height: var(--heading-size-h1);
  font-weight: 500;
  margin: 0 0 var(--fui-space-xl) 0;
  padding: 0;
}

h2 {
  font-size: var(--heading-size-h2);
  line-height: var(--heading-size-h2);
  font-weight: 500;
  margin: var(--fui-space-l) 0 var(--fui-space-m) 0;
  padding: 0;
}

h3 {
  font-size: var(--heading-size-h3);
  line-height: var(--heading-size-h3);
  font-weight: 500;
  margin: var(--fui-space-l) 0 var(--fui-space-m) 0;
  padding: 0;
}

h4 {
  font-size: var(--heading-size-h4);
  line-height: var(--heading-size-h4);
  font-weight: 500;
  margin: var(--fui-space-l) 0 var(--fui-space-m) 0;
  padding: 0;
}

h5 {
  font-size: var(--heading-size-h5);
  line-height: var(--heading-size-h5);
  font-weight: 500;
  margin: var(--fui-space-l) 0 var(--fui-space-m) 0;
  padding: 0;
}

p {
  font-size: var(--font-size-l);
  line-height: var(--font-size-xl);
  font-weight: 400;
  margin: 0 0 var(--fui-space-m) 0;
  padding: 0;
}

ul li {
  margin-bottom: var(--fui-space-s);
}

ol li {
  margin-bottom: var(--fui-space-s);
}

pre {
  position: relative;
  border: 1px solid var(--color-border-secondary);
  padding: var(--fui-space-xl) var(--fui-space-m) var(--fui-space-m) var(--fui-space-m);
  color: var(--color-text-secondary);
  overflow-x: auto;
}

/* Language label in top-right corner */
pre:has(code[class*="language-"])::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-m);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  padding: var(--fui-padding-xs) var(--fui-padding-s);
  border-radius: var(--fui-border-radius-s);
  text-transform: uppercase;
  font-family: "Ubuntu Mono", monospace;
  pointer-events: none;
  line-height: 1.2;
  z-index: 1;
}

/* Specific language labels */
pre:has(code.language-bash)::before {
  content: "bash";
}
pre:has(code.language-js)::before,
pre:has(code.language-javascript)::before {
  content: "javascript";
}
pre:has(code.language-ts)::before,
pre:has(code.language-typescript)::before {
  content: "typescript";
}
pre:has(code.language-json)::before {
  content: "json";
}
pre:has(code.language-css)::before {
  content: "css";
}
pre:has(code.language-html)::before {
  content: "html";
}
pre:has(code.language-xml)::before {
  content: "xml";
}
pre:has(code.language-md)::before,
pre:has(code.language-markdown)::before {
  content: "markdown";
}
pre:has(code.language-python)::before,
pre:has(code.language-py)::before {
  content: "python";
}
pre:has(code.language-go)::before {
  content: "go";
}
pre:has(code.language-rust)::before,
pre:has(code.language-rs)::before {
  content: "rust";
}
pre:has(code.language-java)::before {
  content: "java";
}
pre:has(code.language-php)::before {
  content: "php";
}
pre:has(code.language-ruby)::before,
pre:has(code.language-rb)::before {
  content: "ruby";
}
pre:has(code.language-sql)::before {
  content: "sql";
}
pre:has(code.language-yaml)::before,
pre:has(code.language-yml)::before {
  content: "yaml";
}
pre:has(code.language-sh)::before,
pre:has(code.language-shell)::before {
  content: "shell";
}
pre:has(code.language-diff)::before {
  content: "diff";
}
pre:has(code.language-dockerfile)::before {
  content: "dockerfile";
}