@import "tailwindcss";

@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--fg);
  --color-surface: var(--srf);
  --color-surface-light: var(--srf-l);
  --color-border: var(--brd);
  --color-accent: #ff914d;
  --color-accent-light: #ffb07d;
  --color-accent-glow: rgba(255, 145, 77, 0.3);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-muted: var(--mt);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

:root {
  --bg: #0a0b14;
  --fg: #e4e4e7;
  --srf: #12131f;
  --srf-l: #1a1b2e;
  --brd: #252640;
  --mt: #71717a;
  --glass-bg: rgba(18, 19, 31, 0.7);
  --glass-light-bg: rgba(26, 27, 46, 0.6);
  --code-bg: transparent;
  --tooltip-bg: #1a1b2e;
  --tooltip-border: #252640;
}

:root.light {
  --bg: #f8f9fc;
  --fg: #1a1b2e;
  --srf: #ffffff;
  --srf-l: #f0f1f5;
  --brd: #e2e4ea;
  --mt: #6b7280;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-light-bg: rgba(240, 241, 245, 0.8);
  --code-bg: #f8f9fc;
  --tooltip-bg: #ffffff;
  --tooltip-border: #e2e4ea;
  /* Darker accent tokens for contrast on light backgrounds */
  --color-accent: #e8712d;
  --color-accent-light: #c45b18;
  --color-accent-glow: rgba(232, 113, 45, 0.25);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--brd) transparent;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans), system-ui, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--brd);
}

.glass-light {
  background: var(--glass-light-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--brd);
}

.glow-accent {
  box-shadow: 0 0 20px var(--color-accent-glow), 0 0 60px rgba(255, 145, 77, 0.1);
}

:root.light .glow-accent {
  box-shadow: 0 0 12px rgba(255, 145, 77, 0.15), 0 0 30px rgba(255, 145, 77, 0.06);
}

.glow-text {
  text-shadow: 0 0 20px var(--color-accent-glow);
}

.gradient-accent {
  background: linear-gradient(135deg, #ff914d, #e8712d);
}

.gradient-text {
  background: linear-gradient(135deg, #ff914d, #e8712d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px var(--color-accent-glow); }
  50% { box-shadow: 0 0 20px var(--color-accent-glow), 0 0 40px rgba(255, 145, 77, 0.15); }
}

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

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

@keyframes count-up {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shrink {
  from { width: 100%; }
  to { width: 0%; }
}

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

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

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

pre code {
  font-family: var(--font-mono), monospace;
  font-size: 13px;
  line-height: 1.6;
}