@import "tailwindcss";

:root {
  --background: 250 250 252;
  --foreground: 12 18 33;
  --muted: 240 244 255;
  --muted-foreground: 90 100 123;
  --card: 255 255 255;
  --card-foreground: 12 18 33;
  --border: 228 232 242;
  --primary: 84 92 255;
  --primary-foreground: 255 255 255;
  --secondary: 117 74 255;
  --secondary-foreground: 255 255 255;
}

.dark {
  --background: 8 10 20;
  --foreground: 243 246 255;
  --muted: 18 24 41;
  --muted-foreground: 160 173 197;
  --card: 12 16 29;
  --card-foreground: 243 246 255;
  --border: 35 43 64;
  --primary: 115 126 255;
  --primary-foreground: 255 255 255;
  --secondary: 154 105 255;
  --secondary-foreground: 255 255 255;
}

* {
  border-color: rgb(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: Arial, "Segoe UI", Tahoma, sans-serif;
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(128, 128, 200, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128, 128, 200, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}

.glass {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, rgb(var(--card)) 78%, transparent);
}

.container-shell {
  @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
}

.section-space {
  @apply py-16 md:py-24;
}

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