@font-face {
  font-family: 'FF Mark Pro';
  src: url('/fonts/FontFont_FF.Mark.Pro.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* Sanstone Design System - Premium Stone & Rock Solutions
   Based on brand identity: sophisticated blues, natural textures, premium feel
   All colors in HSL format for design consistency
*/

@layer base {
  :root {
    /* Background System */
    --background: 0 0% 100%;
    --background-secondary: 220 20% 98%;
    --background-muted: 220 15% 96%;
    --foreground: 220 25% 15%;
    --muted: 220 15% 96%;
    --muted-foreground: 220 10% 45%;

    /* Sanstone Brand Colors */
    --sanstone-blue: 210 85% 45%;
    --sanstone-blue-dark: 210 85% 35%;
    --sanstone-blue-light: 210 85% 55%;
    --sanstone-blue-subtle: 210 40% 92%;

    /* Stone-inspired Neutrals */
    --stone-dark: 220 15% 25%;
    --stone-medium: 220 10% 45%;
    --stone-light: 220 8% 65%;
    --stone-subtle: 220 5% 85%;

    /* Primary System (Sanstone Blue) */
    --primary: 210 85% 45%;
    --primary-rgb: 19 118 179;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 210 85% 35%;
    --primary-subtle: 210 40% 92%;

    /* Secondary System (Stone Tones) */
    --secondary: 220 8% 65%;
    --secondary-foreground: 220 25% 15%;
    --secondary-hover: 220 10% 60%;

    /* Card System */
    --card: 0 0% 100%;
    --card-foreground: 220 25% 15%;
    --card-border: 220 15% 90%;
    --card-shadow: 220 25% 15%;

    /* Interactive Elements */
    --accent: 210 85% 45%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 210 85% 35%;

    /* Status Colors */
    --success: 140 70% 45%;
    --success-foreground: 0 0% 100%;
    
    --warning: 45 90% 55%;
    --warning-foreground: 220 25% 15%;
    
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Form Elements */
    --input: 220 15% 90%;
    --input-foreground: 220 25% 15%;
    --border: 220 15% 85%;
    --ring: 210 85% 45%;

    /* Design System Values */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;

    /* Premium Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--sanstone-blue)), hsl(var(--sanstone-blue-dark)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--stone-light)), hsl(var(--stone-medium)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--sanstone-blue) / 0.95), hsl(var(--sanstone-blue-dark) / 0.98));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--background-secondary)));

    /* Premium Shadows */
    --shadow-sm: 0 2px 8px hsl(var(--card-shadow) / 0.04);
    --shadow-md: 0 4px 20px hsl(var(--card-shadow) / 0.08);
    --shadow-lg: 0 10px 40px hsl(var(--card-shadow) / 0.12);
    --shadow-xl: 0 20px 60px hsl(var(--card-shadow) / 0.16);
    --shadow-premium: 0 25px 80px hsl(var(--sanstone-blue) / 0.15);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    /* Dark mode maintains Sanstone premium feel */
    --background: 220 25% 8%;
    --background-secondary: 220 20% 12%;
    --background-muted: 220 15% 16%;
    --foreground: 220 5% 95%;
    --muted: 220 15% 16%;
    --muted-foreground: 220 8% 65%;

    --stone-dark: 220 5% 85%;
    --stone-medium: 220 8% 65%;
    --stone-light: 220 10% 45%;
    --stone-subtle: 220 15% 25%;

    --primary: 210 85% 55%;
    --primary-rgb: 67 158 217;
    --primary-foreground: 220 25% 8%;
    --primary-hover: 210 85% 65%;
    --primary-subtle: 210 40% 20%;

    --secondary: 220 10% 45%;
    --secondary-foreground: 220 5% 95%;
    --secondary-hover: 220 8% 50%;

    --card: 220 20% 12%;
    --card-foreground: 220 5% 95%;
    --card-border: 220 15% 20%;
    --card-shadow: 220 25% 4%;

    --accent: 210 85% 55%;
    --accent-foreground: 220 25% 8%;
    --accent-hover: 210 85% 65%;

    --input: 220 15% 20%;
    --input-foreground: 220 5% 95%;
    --border: 220 15% 25%;
    --ring: 210 85% 55%;

    /* Dark mode gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--sanstone-blue-light)), hsl(var(--sanstone-blue)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--sanstone-blue) / 0.9), hsl(var(--sanstone-blue-dark) / 0.95));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--background-secondary)));
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'FF Mark Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Esconde scrollbar mantendo funcionalidade de scroll */
  html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  /* Animation classes */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-loop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-slide-loop {
    animation: slide-loop 30s linear infinite;
  }

  /* Video optimizations for mobile devices and performance */
  video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Força aceleração por hardware */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* Otimizações específicas para dispositivos móveis */
  @media (max-width: 768px) {
    video {
      /* Reduz overhead de rendering em mobile */
      -webkit-optimization: speed;
      optimization: speed;
      /* Melhora performance de scroll */
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Classes utilitárias para vídeos */
  .video-optimized {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }

  .video-mobile-optimized {
    -webkit-playsinline: true;
  }
}