:root {
  --background: 220 20% 95%;
  --foreground: 220 40% 20%;
  --card: 220 15% 90%;
  --card-foreground: 220 40% 20%;
  --muted: 220 15% 88%;
  --muted-foreground: 215 15% 45%;
  --primary: 220 45% 20%;
  --primary-foreground: 220 20% 95%;
  --secondary: 220 15% 85%;
  --secondary-foreground: 220 40% 20%;
  --accent: 215 20% 72%;
  --accent-foreground: 220 40% 20%;
  --border: 215 15% 80%;
  --input: 215 15% 80%;
  --ring: 215 50% 53%;
  --radius: 0.5rem;
  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 98%;

  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Fira Code', monospace;

  --acudef-primary: 220 45% 20%;
  --acudef-secondary: 220 45% 27%;
  --acudef-tertiary: 215 20% 25%;
  --acudef-silver: 215 20% 72%;
  --acudef-silver-bright: 215 20% 82%;
  --acudef-blue: 215 50% 53%;
  --acudef-blue-hover: 215 55% 61%;
  --acudef-text: 220 30% 92%;
  --acudef-text-muted: 215 15% 55%;
  --acudef-surface: 220 15% 94%;
  --acudef-chrome: 215 20% 85%;
  --acudef-amber: 40 76% 55%;
  --acudef-red: 0 66% 57%;
  --acudef-green: 152 45% 42%;
  --acudef-insignia: 215 15% 62%;
}

.dark {
  --background: 220 40% 15%;
  --foreground: 220 20% 92%;
  --card: 220 35% 22%;
  --card-foreground: 220 20% 92%;
  --muted: 220 25% 25%;
  --muted-foreground: 215 15% 55%;
  --primary: 220 20% 92%;
  --primary-foreground: 220 40% 15%;
  --secondary: 220 25% 25%;
  --secondary-foreground: 220 20% 92%;
  --accent: 215 20% 72%;
  --accent-foreground: 220 20% 92%;
  --border: 215 20% 25%;
  --input: 215 20% 25%;
  --ring: 215 50% 53%;
  --destructive: 0 70% 40%;
  --destructive-foreground: 0 0% 98%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Accessible focus ring */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid hsl(var(--acudef-blue));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: hsl(var(--acudef-blue));
  color: white;
  border-radius: 4px;
  font-weight: 600;
  z-index: 9999;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.4);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.6);
}

/* Card helper */
.as-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

/* Grid pattern */
.grid-pattern {
  background-image:
    linear-gradient(hsl(var(--acudef-silver) / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--acudef-silver) / 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Pulse dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Data stream animation */
@keyframes data-stream {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.data-stream-line {
  animation: data-stream 3s linear infinite;
}