/* ============================================================
   TOKENS — Proyectos Nahmias
   Sistema de Design — Variables CSS Globales
   Fuente: site.json (configuración) + BLUEPRINT.md (decisiones)
   Versión: 1.1 — M1.1 refinado
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ─── COLORES — Paleta Nahmias ─────────────────────────── */

  /* Primarios (Brief — brief.md §21) */
  --c-brand: #2682A8;
  /* Azul Nahmias */
  --c-brand-dark: #1a6080;
  /* Hover / énfasis */
  --c-brand-light: #5aabc8;
  /* Acentos sutiles */

  /* Fondos */
  --c-page: #0e1117;
  /* Fondo global de la página (body) */
  --c-bg: #0e1117;
  /* Hero / Footer (contraste oscuro) */
  --c-bg-elevated: #171c27;
  /* Cards oscuros */
  --c-bg-light: #F8F7F4;
  /* Servicios / Nosotros (claro cálido) */
  --c-bg-white: #FFFFFE;
  /* Secundario brand (brief §21) */

  /* Texto */
  --c-text: #EAEAEA;
  /* Texto sobre fondos oscuros */
  --c-text-dark: #1A1A1A;
  /* Texto sobre fondos claros */
  --c-text-muted: #9CA3AF;
  /* Texto secundario / subtítulos */
  --c-text-muted-dark: #6B7280;
  /* Texto secundario sobre fondos claros */

  /* Estados */
  --c-success: #22C55E;
  --c-error: #EF4444;
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-light: rgba(0, 0, 0, 0.10);

  /* Glassmorphism */
  --c-glass-bg: rgba(255, 255, 255, 0.04);
  --c-glass-border: rgba(255, 255, 255, 0.10);


  /* ─── TIPOGRAFÍA ─────────────────────────────────────────── */

  /* Familias (BLUEPRINT — inspiración butor.cl: Serif + Sans) */
  --font-display: 'Playfair Display', Georgia, serif;
  /* Títulos H1-H2 */
  --font-body: 'Inter', system-ui, sans-serif;
  /* Cuerpo y UI */

  /* Escala modular (base 16px, ratio 1.25) */
  --text-xs: 0.75rem;
  /* 12px — labels */
  --text-sm: 0.875rem;
  /* 14px — captions, botones small */
  --text-base: 1rem;
  /* 16px — cuerpo */
  --text-lg: 1.125rem;
  /* 18px — lead */
  --text-xl: 1.25rem;
  /* 20px — subtítulo */
  --text-2xl: 1.5rem;
  /* 24px — H3 */
  --text-3xl: 1.875rem;
  /* 30px — H2 */
  --text-4xl: 2.25rem;
  /* 36px — H2 hero */
  --text-5xl: 3rem;
  /* 48px — H1 desktop */
  --text-6xl: 3.75rem;
  /* 60px — H1 hero max */

  /* Pesos */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Interlineado */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  /* Para labels y overlines */


  /* ─── ESPACIADO (escala 4px) ─────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* Secciones (padding vertical generoso — estilo "boutique premium") */
  --section-py: var(--space-12);
  /* 128px desktop */
  --section-py-sm: var(--space-10);
  /* 80px tablet */
  --section-py-xs: var(--space-9);
  /* 64px mobile */


  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 780px;
  --measure-reading: 68ch;
  /* Longitud óptima de línea para lectura cómoda */
  --container-px: clamp(var(--space-5), 5vw, var(--space-9));
  /* Responsive: 24px → 64px */


  /* ─── BORDES Y RADIOS ─────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;


  /* ─── SOMBRAS ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-brand: 0 4px 20px rgba(38, 130, 168, 0.35);


  /* ─── Z-INDEX — Sistema de capas ───────────────────────── */
  --z-base: 0;
  --z-gallery: 10;
  /* Lightbox overlay base */
  --z-dropdown: 100;
  /* Menús desplegables */
  --z-header: 200;
  /* Navegación sticky */
  --z-whatsapp: 300;
  /* Botón flotante WhatsApp */
  --z-overlay: 400;
  /* Overlays de fondo */
  --z-modal: 500;
  /* Modales y lightbox activo */
  --z-toast: 600;
  /* Notificaciones */


  /* ─── TRANSICIONES ───────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-hero: 600ms cubic-bezier(0.16, 1, 0.3, 1);


  /* ─── GALERÍA (Catalog Scheme — BLUEPRINT §M2.3) ─────────── */
  --gallery-cols-desktop: 3;
  --gallery-cols-tablet: 2;
  --gallery-cols-mobile: 1;
  --gallery-gap: var(--space-5);


  /* ─── GLASSMORPHISM (Uso opcional — no obligatorio) ─────── */
  /* Aplicar solo cuando el fondo lo justifique visualmente    */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 12px;

}


/* ─── MODO CLARO (secciones blancas) ────────────────────── */
/* Las secciones con fondo claro usan este scope */
.section--light {
  --c-bg-section: var(--c-bg-light);
  --c-text-section: var(--c-text-dark);
  --c-text-muted-section: var(--c-text-muted-dark);
  --c-border-section: var(--c-border-light);
}

/* ─── MODO OSCURO (Hero, Footer) ────────────────────────── */
.section--dark {
  --c-bg-section: var(--c-bg);
  --c-text-section: var(--c-text);
  --c-text-muted-section: var(--c-text-muted);
  --c-border-section: var(--c-border);
}