/* =========================================================
   TUBARÃO MOTORS — Design Tokens
   Sistema de cores, tipografia e espaçamento
   ========================================================= */

:root {
  /* --- Cor: base escura de showroom --- */
  --bg-void: #05070d;
  --bg-base: #0a0e17;
  --bg-surface: #0e1420;
  --bg-surface-raised: #131b2b;
  --bg-surface-hover: #182338;

  /* --- Cor: azul tubarão (identidade) --- */
  --shark-900: #062a52;
  --shark-800: #0a3d73;
  --shark-700: #0f5296;
  --shark-600: #146bbf;
  --shark-500: #1481ff;
  --shark-400: #3f9bff;
  --shark-300: #6fb6ff;
  --shark-200: #a8d4ff;
  --shark-100: #dcedff;

  /* --- Gradiente de assinatura --- */
  --gradient-shark: linear-gradient(135deg, #0a3d73 0%, #1481ff 55%, #6fb6ff 100%);
  --gradient-shark-subtle: linear-gradient(180deg, rgba(20, 129, 255, 0.16) 0%, rgba(20, 129, 255, 0) 100%);
  --gradient-fade-bottom: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, #05070d 100%);

  /* --- Texto --- */
  --text-primary: #f4f8fd;
  --text-secondary: #a9b6c9;
  --text-muted: #6b7889;
  --text-on-brand: #ffffff;

  /* --- Estado / utilidade --- */
  --success: #2ecc71;
  --danger: #ff4d4d;
  --warning: #ffb020;
  --star: #ffc93c;

  /* --- Bordas --- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-brand: rgba(20, 129, 255, 0.45);

  /* --- Tipografia --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Escala tipográfica --- */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;

  /* --- Espaçamento --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* --- Raio --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Sombra --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 8px 30px rgba(20, 129, 255, 0.35);

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Transição --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

@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;
  }
}