/* =============================================================
   Casona San José — Tokens CSS
   v1.0.0 — Jalapeños Agencia Digital
   Fuente de verdad: Design System / colors_and_type.css
   ============================================================= */

/* NOTA: @import de Google Fonts se maneja en header.php con
   carga no-bloqueante (preconnect + media="print" trick).
   NO añadir @import aquí — sería render-blocking. */

:root {

  /* -----------------------------------------------------------
     COLOR — Paleta natural del Cajón del Maipo
     ----------------------------------------------------------- */

  /* Superficies */
  --color-piedra:        #F2EDE4;  /* fondo predeterminado — arena cálida */
  --color-piedra-alt:    #EDE7DC;  /* fondo de sección alterna */
  --color-blanco:        #FAFAF8;  /* "blanco" del sistema — NUNCA #FFFFFF */
  --color-borde:         #D9D2C8;  /* hairlines, dividers, FAQ */

  /* Tinta / texto */
  --color-noche:         #1C1C1A;  /* texto principal, footer */
  --color-noche-suave:   #3D3D3A;  /* texto secundario */
  --color-sombra:        #6B6B67;  /* meta, fechas, captions */

  /* Acentos de marca */
  --color-verde-cajon:   #4A5E4D;  /* CTA primario, énfasis de marca */
  --color-cta-hover:     #3A4D3C;  /* hover del CTA primario */
  --color-tierra:        #8C6A4F;  /* decorativo — barro, madera */
  --color-agua:          #9BB5B8;  /* decorativo — río Maipo */

  /* Semánticos (mapeo) */
  --bg:                  var(--color-piedra);
  --bg-alt:              var(--color-piedra-alt);
  --bg-soft:             var(--color-blanco);
  --bg-inverse:          var(--color-noche);

  --fg:                  var(--color-noche);
  --fg-muted:            var(--color-noche-suave);
  --fg-subtle:           var(--color-sombra);
  --fg-inverse:          var(--color-blanco);

  --accent:              var(--color-verde-cajon);
  --accent-hover:        var(--color-cta-hover);
  --decor-warm:          var(--color-tierra);
  --decor-cool:          var(--color-agua);

  --border:              var(--color-borde);
  --hairline:            color-mix(in srgb, var(--color-noche) 8%, transparent);

  /* Overlays de foto */
  --overlay-hero:        linear-gradient(
                           180deg,
                           color-mix(in srgb, var(--color-noche) 0%,  transparent) 50%,
                           color-mix(in srgb, var(--color-noche) 40%, transparent) 100%
                         );
  --overlay-card:        color-mix(in srgb, var(--color-noche) 15%, transparent);
  --overlay-lightbox:    color-mix(in srgb, var(--color-noche) 92%, transparent);

  /* -----------------------------------------------------------
     TYPE — Cormorant Garamond (display) + DM Sans (body)
     Cargadas desde Google Fonts vía header.php (no-blocking).
     ----------------------------------------------------------- */

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida */
  --type-display-xl: clamp(3rem,    6vw,  5.5rem);   /* 48 → 88px */
  --type-display-lg: clamp(2.25rem, 4vw,  3.75rem);  /* 36 → 60px */
  --type-display-md: clamp(1.75rem, 3vw,  2.5rem);   /* 28 → 40px */
  --type-display-sm: clamp(1.375rem, 2vw, 1.75rem);  /* 22 → 28px */
  --type-body-lg:    1.125rem;                        /* 18px */
  --type-body-md:    1rem;                            /* 16px */
  --type-body-sm:    0.875rem;                        /* 14px */
  --type-label:      0.75rem;                         /* 12px */

  --leading-tight:   1.1;
  --leading-normal:  1.4;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* -----------------------------------------------------------
     SPACING — Escala suave, generosa
     ----------------------------------------------------------- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 12rem;     /* 192px */

  --section-padding-y: clamp(4rem, 8vw, 8rem);
  --section-padding-x: clamp(1.25rem, 5vw, 6rem);
  --container-max:    1200px;
  --container-narrow:  760px;
  --container-wide:   1440px;

  /* -----------------------------------------------------------
     RADII — austeros; imágenes SIEMPRE 0
     ----------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-full: 9999px;
  --radius-img:  0px;    /* regla dura — no cambiar */

  /* -----------------------------------------------------------
     SHADOWS — discretas, tintadas con --color-noche
     ----------------------------------------------------------- */

  --shadow-sm: 0 1px  3px rgba(28, 28, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 28, 26, 0.08);
  --shadow-lg: 0 8px 32px rgba(28, 28, 26, 0.10);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-enter:  600ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.76, 0, 0.24, 1);
}