@tailwind base;
@tailwind components;
@tailwind utilities;

/* IVASKO RUN 2025 Design System - Esportivo Premium
All colors MUST be HSL. Ultra-performante e alta conversão.
Tipografia otimizada para legibilidade e performance.
*/

@layer base {
  :root {
    /* Paleta IVASKO RUN baseada na identidade */
    --color-primary-red: 0 76% 49%;        /* #D7262D - vermelho base */
    --color-deep-red: 0 79% 36%;           /* #A5141A - vermelho escuro */
    --color-accent-gold: 48 100% 50%;      /* #FFC300 - dourado CTAs */
    --color-accent-orange: 25 100% 50%;    /* #FF6A00 - laranja realces */
    --color-ink: 220 15% 8%;               /* #111315 - texto escuro */
    --color-white: 0 0% 100%;              /* #FFFFFF - branco puro */
    --color-black: 0 0% 0%;                /* #000000 - preto puro */
    
    /* Gradientes premium */
    --gradient-hero: radial-gradient(ellipse at top, hsl(var(--color-primary-red)) 0%, hsl(var(--color-deep-red)) 100%);
    --gradient-cta: linear-gradient(135deg, hsl(var(--color-accent-gold)) 0%, hsl(var(--color-accent-orange)) 100%);
    --gradient-overlay: linear-gradient(135deg, hsla(var(--color-primary-red), 0.9) 0%, hsla(var(--color-deep-red), 0.95) 100%);
    
    /* Sombras esportivas */
    --shadow-premium: 0 20px 40px -12px hsla(var(--color-deep-red), 0.3);
    --shadow-cta: 0 8px 25px -8px hsla(var(--color-accent-gold), 0.4);
    --shadow-card: 0 4px 20px -4px hsla(var(--color-ink), 0.08);
    
    /* Transições suaves */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Fontes otimizadas */
    --font-display: "Oswald", "Saira Semi Condensed", "Barlow Condensed", "Archivo Narrow", Impact, system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Tokens shadcn compatíveis */
    --background: var(--color-white);
    --foreground: var(--color-ink);
    --card: var(--color-white);
    --card-foreground: var(--color-ink);
    --primary: var(--color-primary-red);
    --primary-foreground: var(--color-white);
    --secondary: 0 0% 96%;
    --secondary-foreground: var(--color-ink);
    --accent: var(--color-accent-gold);
    --accent-foreground: var(--color-ink);
    --border: 0 0% 90%;
    --ring: var(--color-primary-red);
    --radius: 1rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
  }

  /* Hierarquia tipográfica otimizada */
  h1 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0em;
  }

  h2 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .font-display {
    font-family: var(--font-display);
    font-display: swap;
  }

  .text-outline {
    text-shadow: 0 1px 2px hsla(var(--color-black), 0.25);
  }

  /* Tipografia para botões e badges */
  .btn, .badge {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* Textos de corpo otimizados */
  p, li, input, label, .caption {
    font-family: var(--font-body);
    line-height: 1.6;
  }

  /* Uppercase com tracking ajustado */
  .uppercase {
    letter-spacing: 0.04em;
  }
}

/* Componentes IVASKO RUN */
@layer components {
  /* Botões de conversão */
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-4 rounded-xl font-bold text-lg;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--gradient-cta);
    color: hsl(var(--color-ink));
    box-shadow: var(--shadow-cta);
    transition: var(--transition-smooth);
    border: 2px solid transparent;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px -10px hsla(var(--color-accent-gold), 0.6);
    border-color: hsl(var(--color-accent-orange));
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    color: hsl(var(--color-primary-red));
    border: 2px solid hsl(var(--color-accent-gold));
    transition: var(--transition-smooth);
  }

  .btn-ghost:hover {
    background: hsla(var(--color-accent-gold), 0.15);
    box-shadow: 0 0 20px hsla(var(--color-accent-gold), 0.3);
  }

  .btn-ghost-light {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    color: hsl(var(--color-white));
    border: 2px solid hsl(var(--color-white));
    transition: var(--transition-smooth);
  }

  .btn-ghost-light:hover {
    background: hsla(var(--color-white), 0.15);
    box-shadow: 0 0 20px hsla(var(--color-white), 0.3);
  }

  /* Cards e badges */
  .card {
    @apply rounded-2xl p-6 bg-card border border-border;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
  }

  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-bold;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: hsl(var(--color-accent-gold));
    color: hsl(var(--color-ink));
  }

  .badge-outline {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-bold;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    color: hsl(var(--color-primary-red));
    border: 1px solid hsl(var(--color-accent-gold));
  }

  /* Layout premium */
  .container-ivasko {
    @apply max-w-7xl mx-auto px-4 md:px-6 lg:px-8;
  }

  .hero-bg {
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
  }

  .hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, hsla(var(--color-deep-red), 0.3) 100%);
    transform: skewX(-12deg);
    transform-origin: top right;
  }

  /* Elementos decorativos */
  .diagonal-line {
    position: relative;
  }

  .diagonal-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 4px;
    background: hsl(var(--color-accent-gold));
    transform: skewX(-12deg);
  }

  /* Timer regressivo */
  .countdown-box {
    @apply flex flex-col items-center justify-center p-4 rounded-lg;
    background: hsla(var(--color-black), 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid hsla(var(--color-white), 0.1);
  }

  /* Kicker/Eyebrow */
  .kicker {
    @apply text-sm font-bold uppercase;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: hsl(var(--color-accent-gold));
  }

  .eyebrow {
    @apply text-xs font-semibold uppercase;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: hsl(var(--color-accent-gold));
  }

  /* Estados de foco acessíveis */
  .btn-primary:focus,
  .btn-ghost:focus {
    outline: 2px solid hsl(var(--color-accent-gold));
    outline-offset: 2px;
  }

  /* Animações reduzidas */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Kit feature styles */
  .feature { 
    display: flex; 
    align-items: flex-start; 
    gap: 0.75rem; 
    line-height: 1.4; 
  }

  .feature-icon { 
    width: 16px; 
    height: 16px; 
    flex: 0 0 16px; 
    margin-top: 2px;
  }

  .feature--included { 
    color: hsl(var(--foreground)); 
  }

  .feature--included .feature-icon { 
    color: hsl(var(--primary-red)); 
  }

  .feature--excluded { 
    color: hsl(var(--muted-foreground)); 
  }

  .feature--excluded .feature-icon { 
    color: hsl(var(--primary-red)); 
    opacity: 0.9; 
  }

  .features + .legend-exclude { 
    margin-top: 0.5rem; 
    font-size: 0.75rem; 
    color: hsl(var(--muted-foreground)); 
  }

  /* Premiação - Award Icon Centering */
  #premiacao .award-icon {
    --size: 72px;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    border: 2px solid hsl(var(--color-accent-gold));
    background: hsla(var(--color-accent-gold), 0.15);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 10px;
    overflow: visible;
  }

  #premiacao .award-icon > svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    vector-effect: non-scaling-stroke;
  }
}