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

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

@font-face {
  font-family: 'FF Mark Pro';
  src: url('/fonts/FontFont_FF.Mark.Pro.Bold.otf') format('opentype');
  font-weight: 700;
  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 {
    /* === Sanstone Canonical Tokens (catalog-aligned) === */
    /* Surfaces — white, soft white, ink */
    --background: 0 0% 100%;
    --background-secondary: 220 20% 98%;
    --background-muted: 220 15% 96%;
    --surface: 0 0% 100%;
    --surface-soft: 220 20% 98%;
    --foreground: 220 25% 15%;
    --ink: 220 25% 15%;
    --ink-soft: 220 10% 45%;
    --muted: 220 15% 96%;
    --muted-foreground: 220 10% 45%;

    /* Sanstone Blue — #1376B3 canonical */
    --sanstone-blue: 205 81% 39%;
    --sanstone-blue-dark: 205 82% 30%;
    --sanstone-blue-light: 205 75% 55%;
    --sanstone-blue-subtle: 205 60% 94%;
    --brand: 205 81% 39%;
    --brand-soft: 205 60% 94%;
    --brand-ink: 0 0% 100%;

    /* 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: 205 81% 39%;
    --primary-rgb: 19 118 179;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 205 82% 30%;
    --primary-subtle: 205 60% 94%;

    /* 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: 205 81% 39%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 205 82% 30%;

    /* 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: 205 81% 39%;

    /* Design System Values */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --radius-card: 1.5rem;
    --radius-pill: 999px;
    --shadow-card: 0 10px 30px hsl(220 25% 15% / 0.06);
    --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);

    /* 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 — só aceleração quando o vídeo está realmente em uso.
     Aplicar will-change/translate3d globalmente em TODO <video> força camadas
     GPU mesmo para vídeos fora da viewport, o que trava o scroll em mobile. */
  .video-optimized {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Mobile: força momentum scroll do iOS. */
  @media (max-width: 768px) {
    html,
    body {
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Respeita preferência do usuário por menos movimento (acessibilidade + perf). */
  @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;
    }
  }
}