netbird/proxy/web/src/index.css

@import "tailwindcss";

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

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

@theme {
  /* Gray */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Red */
  --color-red-50: #FDF2F2;
  --color-red-100: #FDE8E8;
  --color-red-200: #FBD5D5;
  --color-red-300: #F8B4B4;
  --color-red-400: #F98080;
  --color-red-500: #F05252;
  --color-red-600: #E02424;
  --color-red-700: #C81E1E;
  --color-red-800: #9B1C1C;
  --color-red-900: #771D1D;

  /* Yellow */
  --color-yellow-50: #FDFDEA;
  --color-yellow-100: #FDF6B2;
  --color-yellow-200: #FCE96A;
  --color-yellow-300: #FACA15;
  --color-yellow-400: #E3A008;
  --color-yellow-500: #C27803;
  --color-yellow-600: #9F580A;
  --color-yellow-700: #8E4B10;
  --color-yellow-800: #723B13;
  --color-yellow-900: #633112;

  /* Green */
  --color-green-50: #F3FAF7;
  --color-green-100: #DEF7EC;
  --color-green-200: #BCF0DA;
  --color-green-300: #84E1BC;
  --color-green-400: #31C48D;
  --color-green-500: #0E9F6E;
  --color-green-600: #057A55;
  --color-green-700: #046C4E;
  --color-green-800: #03543F;
  --color-green-900: #014737;

  /* Blue */
  --color-blue-50: #EBF5FF;
  --color-blue-100: #E1EFFE;
  --color-blue-200: #C3DDFD;
  --color-blue-300: #A4CAFE;
  --color-blue-400: #76A9FA;
  --color-blue-500: #3F83F8;
  --color-blue-600: #1C64F2;
  --color-blue-700: #1A56DB;
  --color-blue-800: #1E429F;
  --color-blue-900: #233876;

  /* Indigo */
  --color-indigo-50: #F0F5FF;
  --color-indigo-100: #E5EDFF;
  --color-indigo-200: #CDDBFE;
  --color-indigo-300: #B4C6FC;
  --color-indigo-400: #8DA2FB;
  --color-indigo-500: #6875F5;
  --color-indigo-600: #5850EC;
  --color-indigo-700: #5145CD;
  --color-indigo-800: #42389D;
  --color-indigo-900: #362F78;

  /* Purple */
  --color-purple-50: #F6F5FF;
  --color-purple-100: #EDEBFE;
  --color-purple-200: #DCD7FE;
  --color-purple-300: #CABFFD;
  --color-purple-400: #AC94FA;
  --color-purple-500: #9061F9;
  --color-purple-600: #7E3AF2;
  --color-purple-700: #6C2BD9;
  --color-purple-800: #5521B5;
  --color-purple-900: #4A1D96;

  /* Pink */
  --color-pink-50: #FDF2F8;
  --color-pink-100: #FCE8F3;
  --color-pink-200: #FAD1E8;
  --color-pink-300: #F8B4D9;
  --color-pink-400: #F17EB8;
  --color-pink-500: #E74694;
  --color-pink-600: #D61F69;
  --color-pink-700: #BF125D;
  --color-pink-800: #99154B;
  --color-pink-900: #751A3D;

  /* NetBird Gray */
  --color-nb-gray: #181A1D;
  --color-nb-gray-50: #f4f6f7;
  --color-nb-gray-100: #e4e7e9;
  --color-nb-gray-200: #cbd2d6;
  --color-nb-gray-250: #b7c0c6;
  --color-nb-gray-300: #aab4bd;
  --color-nb-gray-350: #8f9ca8;
  --color-nb-gray-400: #7c8994;
  --color-nb-gray-500: #616e79;
  --color-nb-gray-600: #535d67;
  --color-nb-gray-700: #474e57;
  --color-nb-gray-800: #3f444b;
  --color-nb-gray-850: #363b40;
  --color-nb-gray-900: #32363D;
  --color-nb-gray-910: #2b2f33;
  --color-nb-gray-920: #25282d;
  --color-nb-gray-925: #1e2123;
  --color-nb-gray-930: #25282c;
  --color-nb-gray-935: #1f2124;
  --color-nb-gray-940: #1c1e21;
  --color-nb-gray-950: #181a1d;
  --color-nb-gray-960: #15171a;

  /* NetBird Orange */
  --color-netbird: #f68330;
  --color-netbird-50: #fff6ed;
  --color-netbird-100: #feecd6;
  --color-netbird-150: #ffdfb8;
  --color-netbird-200: #ffd4a6;
  --color-netbird-300: #fab677;
  --color-netbird-400: #f68330;
  --color-netbird-500: #f46d1b;
  --color-netbird-600: #e55311;
  --color-netbird-700: #be3e10;
  --color-netbird-800: #973215;
  --color-netbird-900: #7a2b14;
  --color-netbird-950: #421308;

  /* NetBird Blue */
  --color-nb-blue: #31e4f5;
  --color-nb-blue-50: #ebffff;
  --color-nb-blue-100: #cefdff;
  --color-nb-blue-200: #a2f9ff;
  --color-nb-blue-300: #63f2fd;
  --color-nb-blue-400: #31e4f5;
  --color-nb-blue-500: #00c4da;
  --color-nb-blue-600: #039cb7;
  --color-nb-blue-700: #0a7c94;
  --color-nb-blue-800: #126478;
  --color-nb-blue-900: #145365;
  --color-nb-blue-950: #063746;
}

:root {
  --nb-bg: #18191d;
  --nb-card-bg: #1b1f22;
  --nb-border: rgba(50, 54, 61, 0.5);
  --nb-text: #e4e7e9;
  --nb-text-muted: rgba(167, 177, 185, 0.8);
  --nb-primary: #f68330;
  --nb-primary-hover: #e5722a;
  --nb-input-bg: rgba(63, 68, 75, 0.5);
  --nb-input-border: rgba(63, 68, 75, 0.8);
  --nb-error-bg: rgba(153, 27, 27, 0.2);
  --nb-error-border: rgba(153, 27, 27, 0.5);
  --nb-error-text: #f87171;
}

html {
    color-scheme: dark;
    @apply bg-nb-gray;
}

html.dark,
:root {
    color-scheme: dark;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

h1 {
    @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
}
h2 {
    @apply text-xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
}
p {
    @apply font-light tracking-wide text-gray-700 dark:text-zinc-50 text-sm;
}

[placeholder] {
  text-overflow: ellipsis;
}