@import "tailwindcss";

/* ============================================
   THEME — Racing Cards Design System
   ============================================ */
@theme {
  /* Colors — Base */
  --color-bg: #0a0a12;
  --color-surface: #161621;
  --color-surface-alt: #1e1e3a;
  --color-border: #2a2a4a;

  /* Colors — Primary (Red) */
  --color-primary: #e10600;
  --color-primary-hover: #c00500;
  --color-primary-active: #a00400;
  --color-primary-subtle: #2a0a0a;

  /* Colors — Accent (Cyan) */
  --color-accent: #00e5c8;
  --color-accent-hover: #00c4ab;
  --color-accent-subtle: #0a1e1a;

  /* Colors — Text */
  --color-text: #f0f0f5;
  --color-text-muted: #8888a0;
  --color-text-disabled: #505068;

  /* Colors — States */
  --color-success: #22c55e;
  --color-error: #ef4444;

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-card: 14px;

  /* Shadows */
  --shadow-card: 0 4px 24px oklch(0% 0 0 / 0.4);
  --shadow-glow-accent: 0 0 20px oklch(75% 0.18 180 / 0.3), 0 0 60px oklch(75% 0.18 180 / 0.1);
  --shadow-glow-primary: 0 0 20px oklch(55% 0.28 29 / 0.3), 0 0 60px oklch(55% 0.28 29 / 0.1);
}

/* ============================================
   BASE STYLES
   ============================================ */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-text);
    text-wrap: balance;
  }

  p, li {
    text-wrap: pretty;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@layer components {
  /* Speed lines — Hero decoration */
  .speed-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .speed-lines::before,
  .speed-lines::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 200px;
    background: linear-gradient(90deg, transparent, oklch(75% 0.18 180 / 0.4), transparent);
    animation: speed-line 3s linear infinite;
  }

  .speed-lines::before { top: 30%; }
  .speed-lines::after { top: 70%; width: 150px; animation-delay: 1.5s; }

  @keyframes speed-line {
    from { translate: -200px 0; }
    to { translate: calc(100vw + 200px) 0; }
  }

  /* Hide scrollbar utility */
  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
