/* ==========================================================================
   DESIGN TOKENS & VARIABLES - CEVICHERÍA PUNTA DEL NORTE
   Paleta: Turquesa / Celeste Mar, Naranja Cálido, Blanco y Madera Costera
   ========================================================================== */

:root {
  /* --- PALETA CROMÁTICA PRINCIPAL (Mar & Costa) --- */
  --color-primary: #028090;          /* Turquesa Océano Intenso */
  --color-primary-dark: #05668D;     /* Azul Marino Profundo */
  --color-primary-light: #00A896;    /* Turquesa Caribe Brillante */
  --color-primary-soft: #E0F2F1;     /* Espuma Marina Suave */
  --color-primary-glow: rgba(0, 168, 150, 0.25);

  /* --- ACENTOS CÁLIDOS (Apetito, Energía & Conversión CTA) --- */
  --color-accent: #FF6B35;           /* Naranja Solar Tropical */
  --color-accent-hover: #E85D04;     /* Naranja Intenso */
  --color-accent-dark: #D9480F;      /* Naranja Fuego */
  --color-accent-soft: #FFF3EB;      /* Melocotón Suave */
  --color-accent-glow: rgba(255, 107, 53, 0.35);

  --color-gold: #F4A261;             /* Dorado Sol Costero */
  --color-stars: #FFB703;            /* Amarillo Estrellas Google */

  /* --- DETALLES DE MADERA ARTESANAL & TIERRA --- */
  --color-wood-dark: #3E2723;        /* Madera Tostada */
  --color-wood-medium: #6D4C41;      /* Madera Caoba Costera */
  --color-wood-light: #8D6E63;       /* Madera Clara */
  --color-wood-bg: #EFEBE9;          /* Tono Tablilla Rústico */

  /* --- NEUTROS, FONDOS & SUPERFICIES --- */
  --color-bg-body: #F8FAF9;          /* Arena Blanca / Frescura */
  --color-bg-surface: #FFFFFF;       /* Blanco Puro */
  --color-bg-card: #FFFFFF;
  --color-bg-alt: #F0F7F7;           /* Brisa Marina Claro */
  --color-bg-dark: #0A1922;          /* Noche Costera */
  --color-bg-dark-surface: #102633;  /* Superficie Noche */

  /* --- TIPOGRAFÍA Y CONTRASTES WCAG AA --- */
  --color-text-main: #14232C;        /* Carbón Azulado (Ratio > 10:1) */
  --color-text-secondary: #4A606D;   /* Gris Marino Intermedio */
  --color-text-muted: #7A909E;       /* Gris Suave */
  --color-text-light: #F4F9FA;       /* Blanco Mar */
  --color-border: #E2ECEB;
  --color-border-light: #EDF4F4;

  /* --- ESTADOS Y FEEDBACK --- */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;

  /* --- TIPOGRAFÍA (Google Fonts) --- */
  --font-family-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Outfit', sans-serif;
  --font-family-script: 'Caveat', cursive;

  /* Escala Tipográfica */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */
  --font-size-4xl: 3.25rem;   /* 52px */
  --font-size-5xl: 4rem;      /* 64px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* --- ESPACIADO MATEMÁTICO (8-Point Grid) --- */
  --space-2: 0.25rem;   /* 4px */
  --space-4: 0.5rem;    /* 8px */
  --space-6: 0.75rem;   /* 12px */
  --space-8: 1rem;      /* 16px */
  --space-12: 1.5rem;   /* 24px */
  --space-16: 2rem;     /* 32px */
  --space-24: 3rem;     /* 48px */
  --space-32: 4rem;     /* 64px */
  --space-48: 6rem;     /* 96px */

  /* --- ELEVACIONES Y SOMBRAS --- */
  --shadow-sm: 0 2px 4px rgba(10, 25, 34, 0.05);
  --shadow-md: 0 6px 16px rgba(10, 25, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 25, 34, 0.12);
  --shadow-xl: 0 20px 48px rgba(10, 25, 34, 0.16);
  --shadow-glow-orange: 0 8px 24px var(--color-accent-glow);
  --shadow-glow-teal: 0 8px 24px var(--color-primary-glow);
  --shadow-wood: 0 6px 18px rgba(62, 39, 35, 0.15);

  /* --- BORDES Y RADIOS --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- TRANSICIONES Y MICROINTERACCIONES --- */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- LAYOUT Y SAFE AREAS --- */
  --container-max-width: 1200px;
  --header-height: 86px;
  --header-height-mobile: 74px;
  --z-index-dropdown: 100;
  --z-index-sticky: 500;
  --z-index-modal: 1000;
  --z-index-floating: 900;
  --z-index-toast: 1100;
}