/* ========================================
   CSS VARIABLES - Design System
   Litl Studio Website
   ======================================== */

   :root {
      /* ==================
         COLORES
         ================== */
      --color-bg: #fafafa;
      --color-text: #333333;
      --color-text-light: #666666;
      --color-accent: #333333;
      
      /* ==================
         TIPOGRAFÍA
         ================== */
      --font-family: 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      
      /* Tamaños fluidos con clamp() para responsive */
      --font-size-h1: clamp(1.6rem, 1.6vw, 2rem);
      --font-size-h2: clamp(1.4rem, 1.4vw, 1rem);
      --font-size-body: clamp(1rem, 1.5vw, 1.2rem);
      --font-size-small: clamp(0.875rem, 1.2vw, 1rem);
      
      /* Pesos de fuente */
      --font-weight-regular: 400;
      --font-weight-medium: 500;
      --font-weight-bold: 700;
      
      /* Line heights */
      --line-height-tight: 1.2;
      --line-height-normal: 1.4;
      --line-height-relaxed: 1.4;
      
      /* ==================
         ESPACIADO
         ================== */
      --spacing-xs: 0.5rem;    /* 8px */
      --spacing-sm: 1rem;      /* 16px */
      --spacing-md: 2rem;      /* 32px */
      --spacing-lg: 4rem;      /* 64px */
      --spacing-xl: 6rem;      /* 96px */
      
      /* ==================
         TIMING DE ANIMACIONES
         ================== */
      --timing-fast: 0.3s;
      --timing-medium: 0.6s;
      --timing-slow: 0.8s;
      --timing-very-slow: 1.2s;
      
      /* ==================
         EASING FUNCTIONS
         ================== */
      --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      
      /* ==================
         Z-INDEX LAYERS
         ================== */
      --z-base: 1;
      --z-slider: 100;
      --z-slider-dots: 150;
      --z-about: 200;
      --z-contact: 300;
      --z-header: 1000;
      --z-cursor: 9999;
      --z-preloader: 10000;
      
      /* ==================
         LAYOUT
         ================== */
      --padding-section: 1rem;
      --max-width-content: 90%;
      --max-width-text: 800px;
  }
  
  /* ==================
     RESPONSIVE ADJUSTMENTS
     ================== */
  
  /* Tablet */
  @media (min-width: 768px) {
      :root {
          --padding-section: 2rem;
          --max-width-content: 80%;
      }
  }
  
  /* Desktop */
  @media (min-width: 1024px) {
      :root {
          --padding-section: 3rem;
          --max-width-content: 1200px;
      }
  }
  
  /* Large Desktop */
  @media (min-width: 1440px) {
      :root {
          --padding-section: 4rem;
      }
  }
  
  /* ==================
     BASE STYLES
     ================== */
  
  html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: scroll;
      scrollbar-width: none; /* Firefox */
  }
  
  /* Ocultar scrollbar - Chrome, Safari, Edge */
  html::-webkit-scrollbar {
      display: none;
  }
  
  body::-webkit-scrollbar {
      display: none;
  }
  
  body {
      margin: 0;
      padding: 0;
      font-family: var(--font-family);
      font-size: var(--font-size-body);
      line-height: var(--line-height-normal);
      background: var(--color-bg);
      color: var(--color-text);
      overflow-x: hidden;
      -ms-overflow-style: none; /* IE y Edge legacy */
  }

  /* Skip Link - Accesibilidad */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #333;
    color: #fafafa;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.3s ease;
    font-size: 14px;
}

.skip-link:focus {
    top: 0;
}