@import "tailwindcss";

:root {
  --bg: #ffffff;
  --bg-dark: #0f172a;
  /* Slate 900 - Deep Navy */
  --surface: #f1f5f9;
  /* Slate 100 */
  --surface-dark: #1e293b;
  /* Slate 800 */
  --ink: #0f172a;
  /* Slate 900 */
  --ink-light: #f8fafc;
  /* Slate 50 */
  --muted: #64748b;
  /* Slate 500 */
  --brand: #b91c1c;
  /* Red 700 - Darker Red */
  --brand-strong: #991b1b;
  /* Red 800 */
  --line: #e2e8f0;
  /* Slate 200 */
  --line-dark: #334155;
  /* Slate 700 */
}

@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--ink);
  --font-sans: var(--font-body);
  --font-display: var(--font-display);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body), system-ui, sans-serif;
  min-height: 100vh;
}

::selection {
  background: rgba(185, 28, 28, 0.4);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background: rgba(239, 68, 68, 0.6);
    color: #ffffff;
  }
}

/* Infinite Scrolling Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 50s linear infinite;
  will-change: transform;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

/* Ken Burns Effect - Fancy zoom for hero carousel */
@keyframes ken-burns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.animate-ken-burns {
  animation: ken-burns 5s ease-out forwards;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-scroll {
    animation: none;
    transform: none;
  }
  .animate-ken-burns {
    animation: none;
  }
}