/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

/* CSS Variables for colors */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

/* Base styles */
* {
  box-sizing: border-box;
  border-color: var(--border);
  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Geist', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility classes */
.min-h-screen {
  min-height: 100vh;
}

.h-screen {
  height: 100vh;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-slate-900 {
  background-color: #0f172a;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.z-20 {
  z-index: 20;
}

.z-0 {
  z-index: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.mask-image {
  mask-image: radial-gradient(transparent, white);
  -webkit-mask-image: radial-gradient(transparent, white);
}

/* Text styles */
.md\:text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-white {
  color: white;
}

.text-center {
  text-align: center;
}

.mt-2 {
  margin-top: 0.5rem;
}

.text-neutral-300 {
  color: #d4d4d8;
}

/* Boxes container - fixed background */
.boxes-container {
  position: fixed;
  left: 25%;
  top: -10%;
  transform: translate(-40%, -20%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0);
  padding: 1rem;
  display: flex;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
}

.box-row {
  width: 8rem;
  height: 3rem;
  border-left: 1px solid #ffffff;
  position: relative;
}

.box-cell {
  width: 8rem;
  height: 4rem;
  position: relative;
  border: 1px solid #ffffff;
  transition: background-color 0s; /* Instant like React */
  pointer-events: auto;
  will-change: background-color; /* Optimize for animations */
  transform: translateZ(0); /* Hardware acceleration */
}

.box-cell.border-r {
  border-right: 1px solid #ffffff;
}

.box-cell.border-t {
  border-top: 1px solid #ffffff;
}

/* SVG icons - exactly like React version */
.box-icon {
  position: absolute;
  top: -14px; /* React positioning */
  left: -22px; /* React positioning */
  pointer-events: none;
  opacity: 0.7; /* Subtle like React */
  color: #334155; /* Same as grid lines */
}

/* Even smaller, more subtle icons */
.box-icon.h-1 {
  height: 0.25rem; /* 4px - extremely small */
}

.box-icon.w-1 {
  width: 0.25rem; /* 4px - extremely small */
}

/* Animation colors */
.color-sky-300 { background-color: rgb(125 211 252); }
.color-pink-300 { background-color: rgb(249 168 212); }
.color-green-300 { background-color: rgb(134 239 172); }
.color-yellow-300 { background-color: rgb(253 224 71); }
.color-red-300 { background-color: rgb(252 165 165); }
.color-purple-300 { background-color: rgb(216 180 254); }
.color-blue-300 { background-color: rgb(147 197 253); }
.color-indigo-300 { background-color: rgb(165 180 252); }
.color-violet-300 { background-color: rgb(196 181 253); }

/* Additional content styles */
.bg-slate-800 {
  background-color: #1e293b;
}

.bg-slate-700 {
  background-color: #334155;
}

.text-gray-300 {
  color: #d1d5db;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
  gap: 2rem;
}

.gap-12 {
  gap: 3rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.text-center {
  text-align: center;
}

/* Responsive grid */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .md\:text-4xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}