src/index.css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-headline: "Space Grotesk", sans-serif;

  --color-surface-base: #E8E8E4;
  --color-surface-container: #F2F2EF;
  --color-surface-sidebar: #DDDDD8;
  --color-border-technical: #C8C8C2;
  --color-primary-industrial: #172a40;
  --color-secondary-industrial: #b02d21;
  --color-tertiary-industrial: #004923;
  --color-tertiary-light: #5ebd7b;
}

@layer base {
  body {
    @apply bg-surface-base text-primary-industrial font-sans antialiased;
  }

  * {
    @apply border-border-technical;
    border-radius: 0 !important;
  }
}

.technical-border {
  border: 0.5px solid var(--color-border-technical);
}

.dotted-border {
  border: 1px dashed var(--color-border-technical);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-base);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-technical);
}