@import "tailwindcss";

:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 188 100% 50%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 188 100% 50%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 188 100% 50%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 188 100% 50%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 188 100% 50%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 188 100% 50%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-brand: var(--font-bebas);
  --font-orbitron: var(--font-orbitron);
  --font-inter: var(--font-inter);
  --font-jetbrains-mono: var(--font-jetbrains-mono);
  --font-space-mono: var(--font-space-mono);
  --font-rajdhani: var(--font-rajdhani);
  --font-exo-2: var(--font-exo-2);
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-jetbrains-mono), Arial, Helvetica, sans-serif;
}

.font-brand {
  font-family: var(--font-brand), var(--font-sans), Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.font-orbitron {
  font-family: var(--font-orbitron), var(--font-sans), Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.font-inter {
  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
}

.font-terminal {
  font-family: var(--font-jetbrains-mono), monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.font-space-mono {
  font-family: var(--font-space-mono), monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.font-rajdhani {
  font-family: var(--font-rajdhani), sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.font-exo-2 {
  font-family: var(--font-exo-2), sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Dot effect for black text - simplified approach */
.text-dots {
  position: relative;
  color: #000000;
  background-image: 
    radial-gradient(circle, #000000 1px, transparent 1px);
  background-size: 3px 3px;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom dotted border with solid corner dots */
.dotted-border-corners {
  position: relative;
}

.dotted-border-corners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dotted #f5f5f5;
  pointer-events: none;
}

.dotted-border-corners::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: 
    /* Corner dots */
    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 0 / 6px 6px,
    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 0 / 6px 6px,
    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 100% / 6px 6px,
    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 100% / 6px 6px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Hide scrollbar for all elements */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}