@import "tailwindcss";

@theme {
  --font-sans: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  --font-display: 'Satoshi', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-brand-50: #fffbeb;
  --color-brand-100: #fef3c7;
  --color-brand-200: #fde68a;
  --color-brand-300: #fcd34d;
  --color-brand-400: #fbbf24;
  --color-brand-500: #f59e0b;
  --color-brand-600: #d97706;
  --color-brand-700: #b45309;
  --color-brand-800: #92400e;
  --color-brand-900: #78350f;

  --color-accent-50: #f0fdfa;
  --color-accent-100: #ccfbf1;
  --color-accent-200: #99f6e4;
  --color-accent-300: #5eead4;
  --color-accent-400: #2dd4bf;
  --color-accent-500: #14b8a6;
  --color-accent-600: #0d9488;
  --color-accent-700: #0f766e;
  --color-accent-800: #115e59;
  --color-accent-900: #134e4a;

  --color-surface-50: #f8fafc;
  --color-surface-100: #f1f5f9;
  --color-surface-200: #e2e8f0;
  --color-surface-700: #334155;
  --color-surface-800: #1e293b;
  --color-surface-850: #162032;
  --color-surface-900: #0f172a;
  --color-surface-950: #020617;

  --tracking-hero: -0.02em;

  --animate-fade-in-up: fade-in-up 0.6s ease-out forwards;
  --animate-gradient-shift: gradient-shift 8s ease infinite;

  @keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
}

/* Preserve v3 default border color (gray-200) instead of v4's currentColor. */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}
