@import "tailwindcss";
@plugin "@iconify/tailwind4" {
  prefix: "i";
}

@source inline("{hover:,}{bg-,outline-,text-,}layer-0{/30,/50,}");
@source inline("{hover:,}{bg-,outline-,text-,}layer-1{/30,/50,}");
@source inline("{hover:,}{bg-,outline-,text-,}layer-2{/30,/50,}");
@source inline("{hover:,}{bg-,outline-,text-,}layer-3{/30,/50,}");
@source inline("{hover:,}{bg-,outline-,text-,}active");
@source inline("{hover:,}{bg-,outline-,text-,}selected");
@source inline("{hover:,}{bg-,outline-,text-,}outline{!,}");
@source inline("{hover:,}{bg-,outline-,text-,}connection");
@source inline("{hover:,}{bg-,outline-,text-,}text");

/* fira-code-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/fira-code-v22-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-code-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/fira-code-v22-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --font-family: "Fira Code", monospace;
  font-family: var(--font-family);

  /* Spacing */
  --spacing-xs: 4px;
  /* Extra small spacing */
  --spacing-sm: 8px;
  /* Small spacing */
  --spacing-md: 16px;
  /* Medium spacing */
  --spacing-lg: 24px;
  /* Large spacing */
  --spacing-xl: 32px;
  /* Extra large spacing */
}

@theme {
  --color-neutral-100: #e7e7e7;
  --color-neutral-200: #cecece;
  --color-neutral-300: #7c7c7c;
  --color-neutral-400: #2d2d2d;
  --color-neutral-500: #171717;
  --color-neutral-800: #111111;
  --color-neutral-900: #060606;

  --color-layer-0: var(--neutral-900);
  --color-layer-1: var(--neutral-500);
  --color-layer-2: var(--neutral-400);
  --color-layer-3: var(--neutral-200);

  --color-active: #ffffff;
  --color-selected: #c65a19;

  --color-outline: var(--neutral-400);
  --color-connection: #333333;

  --color-text: var(--neutral-200);
}

html {
  --neutral-050: #f0f0f0;
  --neutral-100: #e7e7e7;
  --neutral-200: #cecece;
  --neutral-300: #7c7c7c;
  --neutral-350: #808080;
  --neutral-400: #2d2d2d;
  --neutral-500: #171717;
  --neutral-800: #111111;
  --neutral-900: #060606;

  --color-layer-0: var(--neutral-900);
  --color-layer-1: var(--neutral-500);
  --color-layer-2: var(--neutral-400);
  --color-layer-3: var(--neutral-300);

  --color-active: #ffffff;
  --color-selected: #c65a19;

  --color-outline: #3e3e3e;
  --color-connection: #333333;

  --color-text-color: var(--neutral-200);
}

body {
  color: var(--color-text);
  background-color: var(--color-layer-0);
  margin: 0;
}

html.theme-light {
  --color-text: var(--neutral-800);
  --color-outline: var(--neutral-350);
  --color-layer-0: var(--neutral-050);
  --color-layer-1: var(--neutral-100);
  --color-layer-2: var(--neutral-200);
  --color-layer-3: var(--neutral-300);
  --color-active: #000000;
  --color-selected: #c65a19;
  --color-connection: #888;
}

html.theme-solarized {
  --color-text: #425055;
  --color-outline: #93a1a1;
  --color-layer-0: #fdf6e3;
  --color-layer-1: #eee8d5;
  --color-layer-2: #c4c0b4;
  --color-layer-3: #586e75;
  --color-active: #000000;
  --color-selected: #268bd2;
  --color-connection: #839496;
}

html.theme-catppuccin {
  --color-text: #cdd6f4;
  --color-outline: #3e3e4f;
  --color-layer-3: #a8aac8;
  --color-layer-2: #313244;
  --color-layer-1: #1e1e2e;
  --color-layer-0: #11111b;
  --color-connection: #444459;
}

html.theme-high-contrast {
  --color-text: white;
  --color-outline: white;
  --color-layer-0: black;
  --color-layer-1: black;
  --color-layer-2: black;
  --color-layer-3: white;
  --color-active: #00ff00;
  --color-selected: #ff0000;
  --color-connection: #fff;
}

html.theme-high-contrast-light {
  --color-text: black;
  --color-outline: black;
  --color-layer-0: white;
  --color-layer-1: white;
  --color-layer-2: white;
  --color-layer-3: black;
  --color-active: #00ffff;
  --color-selected: #ff0000;
  --color-connection: black;
}

html.theme-nord {
  --color-text: #d8dee9;
  --color-outline: #4c566a;
  --color-layer-0: #2e3440;
  --color-layer-1: #3b4252;
  --color-layer-2: #434c5e;
  --color-layer-3: #5e81ac;
  --color-active: #8999bd;
  --color-selected: #b76c3f;
  --color-connection: #4c566a;
}

html.theme-dracula {
  --color-text: #f8f8f2;
  --color-outline: #6272a4;
  --color-layer-0: #282a36;
  --color-layer-1: #44475a;
  --color-layer-2: #32374d;
  --color-layer-3: #bd93f9;
  --color-connection: #6272a4;
}