/* ==========================================================================
   GARIANNA INSURANCE — DESIGN TOKENS
   Sistema de diseño derivado del logo oficial (escudo dorado + mármol +
   ondas verde salvia). Toda decisión de color, tipografía y espaciado en
   el sitio referencia estas variables — no se usan valores sueltos.
   ========================================================================== */

:root {
  /* ---- Color: extraído directamente del logo ---- */
  --gold-primary:   #B08A3E;   /* escudo / acentos principales */
  --gold-deep:       #8C6D2E;   /* hover / texto dorado sobre blanco (AA) */
  --gold-soft:       #D9BE85;   /* bordes sutiles, detalles */
  --sage:            #7E8F6C;   /* verde salvia de las ondas del logo */
  --sage-deep:       #5F6E4F;   /* verde oscuro para contraste */
  --sage-soft:       #E7EBE0;   /* fondos suaves con tinte verde */
  --marble:          #F8F6F1;   /* fondo base cálido (no blanco puro) */
  --marble-deep:     #EFEBE2;   /* secciones alternas */
  --charcoal:        #2B2A25;   /* texto principal, no negro puro */
  --charcoal-soft:   #5C5850;   /* texto secundario */
  --line:            #E3DDCF;   /* bordes / divisores */
  --white:           #FFFFFF;

  /* Estados */
  --success: #5F7A52;
  --focus-ring: #4A6FA5;

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.15rem, 1.08rem + 0.4vw, 1.4rem);
  --fs-xl:   clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  --fs-2xl:  clamp(1.8rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-3xl:  clamp(2.3rem, 1.8rem + 2.6vw, 3.75rem);
  --fs-4xl:  clamp(2.8rem, 2.1rem + 3.6vw, 4.75rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Espaciado (escala fluida 4/8) ---- */
  --sp-2xs: clamp(0.4rem, 0.38rem + 0.15vw, 0.5rem);
  --sp-xs:  clamp(0.6rem, 0.56rem + 0.2vw, 0.75rem);
  --sp-sm:  clamp(0.9rem, 0.83rem + 0.35vw, 1.125rem);
  --sp-md:  clamp(1.4rem, 1.25rem + 0.75vw, 1.875rem);
  --sp-lg:  clamp(2.2rem, 1.85rem + 1.75vw, 3.5rem);
  --sp-xl:  clamp(3.2rem, 2.6rem + 3vw, 5.5rem);
  --sp-2xl: clamp(4.5rem, 3.5rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --content-max: 1280px;
  --content-max-wide: 1600px;
  --content-max-narrow: 760px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---- Forma ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Sombra (sutil, "de papel") ---- */
  --shadow-sm: 0 1px 3px rgba(43, 42, 37, 0.06), 0 1px 2px rgba(43, 42, 37, 0.04);
  --shadow-md: 0 6px 20px rgba(43, 42, 37, 0.08), 0 2px 6px rgba(43, 42, 37, 0.05);
  --shadow-lg: 0 20px 50px rgba(43, 42, 37, 0.12), 0 6px 16px rgba(43, 42, 37, 0.06);
  --shadow-gold: 0 10px 30px rgba(176, 138, 62, 0.25);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}