/* ============================================
   GLOBAL STYLES - Zafira Odontologia
   
   Variáveis CSS base que podem ser sobrescritas
   por mobile.css e desktop.css
   ============================================ */

:root {
   /* ==========================================
     COLORS
     ========================================== */
   --color-primary: #00A0D2;
   --color-primary-dark: #044870;
   --color-primary-light: #E0F7FA;
   --color-gray-light: #F5F5F5;
   --color-gray-dark: #333333;
   --color-white: #ffffff;

   /* ==========================================
     SPACING - Base values
     Serão sobrescritos por mobile.css/desktop.css
     ========================================== */
   --section-padding-y: 3.5rem;
   --container-padding-x: 1rem;

   /* ==========================================
     TYPOGRAPHY - Base values
     ========================================== */
   --heading-size-hero: 38px;
   --heading-size-section: 1.5rem;
   --text-base-size: 1rem;
   --line-height-tight: 1.1;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.625;

   /* ==========================================
     HERO - Base values
     ========================================== */
   --hero-image-size: 250px;
   --hero-min-height: 75vh;

   /* ==========================================
     BUTTONS - Base values
     ========================================== */
   --button-padding-y: 1rem;
   --button-padding-x: 2rem;
   --button-font-size: 1rem;
   --button-border-radius: 0.5rem;

   /* ==========================================
     SHADOWS
     ========================================== */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

   /* ==========================================
     TRANSITIONS
     ========================================== */
   --transition-fast: 150ms ease;
   --transition-normal: 300ms ease;
   --transition-slow: 500ms ease;

   /* ==========================================
     BORDER RADIUS
     ========================================== */
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;
   --radius-lg: 1rem;
   --radius-xl: 1.5rem;
   --radius-full: 9999px;
}

/* ==========================================
   TEXT SELECTION STYLES
   ========================================== */
::selection {
   background-color: #044870;
   /* primary-dark - azul escuro do Zafira */
   color: #ffffff;
}

::-moz-selection {
   background-color: #044870;
   /* primary-dark - azul escuro do Zafira */
   color: #ffffff;
}

/* ==========================================
   BASE RESETS & UTILITIES
   ========================================== */

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

/* Better box-sizing */
*,
*::before,
*::after {
   box-sizing: border-box;
}

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

/* ==========================================
   UTILITY CLASSES
   Use estas classes nos componentes para
   estilos que variam entre mobile/desktop
   ========================================== */

/* Show/hide utilities base (overridden in mobile/desktop.css) */
.mobile-only {
   display: none;
}

.desktop-only {
   display: block;
}

/* ==========================================
   PERFORMANCE OPTIMIZATION
   content-visibility: auto skips rendering
   of off-screen content until needed
   ========================================== */

/* Lazy sections - applied to sections below the fold */
.lazy-section {
   content-visibility: auto;
   contain-intrinsic-size: 0 500px;
   /* Estimated height to prevent CLS */
}

/* Specific section optimizations */
#services,
#work,
#clinic,
#testimonials,
#contact {
   content-visibility: auto;
   contain-intrinsic-size: 0 600px;
}

/* Hide scrollbar in clinic gallery */
.clinic-gallery::-webkit-scrollbar {
   display: none;
}

.testimonial-gallery::-webkit-scrollbar {
   display: none;
}