:root {
  /* Deep, sophisticated dark palette */
  --background: 240 10% 4%;
  --foreground: 60 9% 98%;

  --card: 240 8% 8%;
  --card-foreground: 60 9% 98%;

  --popover: 240 8% 8%;
  --popover-foreground: 60 9% 98%;

  /* Warm cream accent */
  --primary: 45 30% 70%;
  --primary-foreground: 240 10% 4%;

  --secondary: 240 6% 12%;
  --secondary-foreground: 60 9% 90%;

  --muted: 240 6% 15%;
  --muted-foreground: 240 5% 55%;

  /* Teal accent for interactive elements */
  --accent: 173 58% 39%;
  --accent-foreground: 60 9% 98%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 60 9% 98%;

  --border: 240 6% 18%;
  --input: 240 6% 15%;
  --ring: 173 58% 39%;

  --radius: 0.75rem;

  /* Custom tokens */
  --surface-elevated: 240 8% 10%;
  --text-subtle: 240 5% 45%;
  --text-highlight: 45 80% 80%;
  --success: 158 64% 52%;
  --success-muted: 158 40% 20%;
  --warning: 38 92% 50%;
  --warning-muted: 38 50% 20%;

  /* Typography */
  --font-serif: Georgia, 'Instrument Serif', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Consolas', 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

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

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

code, pre {
  font-family: var(--font-mono);
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typing-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.5s ease-out forwards;
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out forwards;
}

.animate-typing-cursor {
  animation: typing-cursor 1s step-end infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Opacity start states for animations */
.opacity-0 { opacity: 0; }

/* Gradient text utility */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

/* Links in experience/project highlights */
[data-profile-experience-highlight] a,
[data-side-project-highlight] a {
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-profile-experience-highlight] a:hover,
[data-side-project-highlight] a:hover {
  opacity: 0.8;
}