/* ============================================================
   DAITAMO — Design Tokens
   Modificá este archivo para cambiar el diseño en todo el sitio
   ============================================================ */

:root {

  /* ── LOGO ──────────────────────────────────────────────── */
  --logo-height:  72px;    /* altura del logo en el header                              */
  --logo-width:   72px;    /* ancho del logo — igual a height porque es casi cuadrado   */
  --header-height: 88px;   /* altura del header — debe ser > logo-height                */

  /* ── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-sans:    'DM Sans', sans-serif;
  --font-serif:   'DM Serif Display', serif;

  /* Tamaños — modificá estos para cambiar todo el sitio */
  --text-xs:      13px;   /* etiquetas, eyebrows, badges       */
  --text-sm:      16px;   /* footer, nav, roles de equipo      */
  --text-base:    21px;   /* párrafos principales              */
  --text-md:      22px;   /* párrafos destacados, cards        */
  --text-lg:      24px;   /* subtítulos, botones CTA           */
  --text-xl:      32px;   /* títulos móvil                     */
  --text-2xl:     43px;   /* títulos de sección desktop        */
  --text-hero:    52px;   /* h1 del hero desktop               */

  /* Interlineado */
  --leading-tight:  1.15;
  --leading-normal: 1.75;
  --leading-loose:  1.85;

  /* ── COLORES ────────────────────────────────────────────── */
  --navy:         #0a2540;
  --navy-mid:     #0d3460;
  --green:        #1a7a4a;
  --green-light:  #22a060;
  --green-muted:  rgba(26,122,74,0.12);
  --green-glow:   #6ee7b7;
  --banner-blue:  #78A5C3;  /* azul del texto del banner                             */

  --white:        #ffffff;
  --off-white:    #f8f9fb;
  --gray-light:   #eef0f4;
  --gray-mid:     #c8cdd8;
  --gray-text:    #6b7280;
  --text-color:   #111827;

  /* ── ESPACIADO ──────────────────────────────────────────── */
  --section-pad-v:        88px;
  --section-pad-h:        48px;
  --section-max-width:    1140px;

  /* ── BORDES Y RADIOS ────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  20px;

  /* ── TRANSICIONES ───────────────────────────────────────── */
  --transition:   0.2s ease;

}

/* ── RESPONSIVE — ajustes automáticos en móvil ─────────────── */
@media (max-width: 900px) {
  :root {
    --text-hero:    38px;
    --text-2xl:     36px;
    --section-pad-v:  64px;
    --section-pad-h:  24px;
  }
}

@media (max-width: 600px) {
  :root {
    --text-hero:    34px;
    --text-2xl:     32px;
    --text-xl:      28px;
    --text-base:    19px;
    --text-md:      20px;
    --section-pad-v:  48px;
    --section-pad-h:  20px;
  }
}