@import "tailwindcss";

:root {
  --background: #131313;
  --foreground: #E5E2E1;
  --primary: #FFD700; /* Industrial Yellow */
  --primary-container: #FFD700;
  --on-primary: #3A3000;
  --surface: #131313;
  --surface-container: #20201F;
  --surface-container-low: #1C1B1B;
  --surface-container-high: #2A2A2A;
  --surface-container-highest: #353535;
  --surface-container-lowest: #0E0E0E;
  --on-surface-variant: #D0C6AB;
  --outline-variant: #4D4732;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-container: var(--primary-container);
  --color-on-primary: var(--on-primary);
  --color-surface: var(--surface);
  --color-surface-container: var(--surface-container);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-on-surface-variant: var(--on-surface-variant);
  --color-outline-variant: var(--outline-variant);
  
  --font-headline: var(--font-space-grotesk), sans-serif;
  --font-body: var(--font-inter), sans-serif;
  --font-label: var(--font-inter), sans-serif;

  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #131313;
    --foreground: #E5E2E1;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
}

.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 215, 0, 0.3);
  color: transparent;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@layer utilities {
  .noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  }

  .text-balance {
    text-wrap: balance;
  }
}