@import "tailwindcss";

/*
 * Design tokens CHESCO CARS — única fuente de colores, tipografías y radios.
 * Tailwind v4 genera utilidades a partir de @theme: bg-chesco-black, text-chesco-red, font-display…
 * Ningún componente debe escribir un color hexadecimal directamente.
 */
@theme {
  /* Marca */
  --color-chesco-black: #080808;
  --color-chesco-red: #f51b2b;
  --color-chesco-red-hover: #d91624;
  --color-chesco-graphite: #16181c;
  --color-chesco-metallic: #aeb2b8;
  --color-chesco-soft-gray: #f3f4f6;
  --color-chesco-white: #ffffff;
  --color-chesco-text: #111318;
  /* Texto secundario sobre fondos claros (el metálico no alcanza contraste AA sobre blanco). */
  --color-chesco-text-muted: #5b616b;
  --color-chesco-border: #e2e4e8;

  /* Estados de vehículo */
  --color-status-available: #16a34a;
  --color-status-reserved: #eab308;
  --color-status-sold: #f51b2b;
  --color-status-consignment: #2563eb;
  --color-status-coming-soon: #6b7280;

  /* Tipografía (variables definidas por next/font en src/app/fonts.ts) */
  --font-display: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

  /* Radios: 8–12 px, nada excesivamente redondeado */
  --radius-chesco-sm: 8px;
  --radius-chesco-md: 10px;
  --radius-chesco-lg: 12px;

  /* Movimiento: 150–300 ms */
  --ease-chesco: cubic-bezier(0.2, 0, 0, 1);
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-chesco-text);
    background-color: var(--color-chesco-white);
    -webkit-font-smoothing: antialiased;
  }

  :focus-visible {
    outline: 2px solid var(--color-chesco-red);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}