/* ============================================================
   CONCREGESA — Design Tokens
   Última actualización: 2026
   ============================================================ */

:root {

  /* ── Colores de marca ── */
  --color-primary:       #0057D9;
  --color-primary-dark:  #0044B0;
  --color-primary-light: #1A6FEF;

  --color-overlay:       rgba(0, 40, 90, 0.65);

  --color-text:          #3A3A3A;
  --color-text-muted:    #6B7280;
  --color-text-inverse:  #FFFFFF;

  --color-bg:            #FFFFFF;
  --color-bg-alt:        #EFEFEF;
  --color-bg-dark:       #0D1F3C;

  --color-success:       #22C55E;
  --color-error:         #EF4444;
  --color-warning:       #F59E0B;

  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1DA851;

  /* ── Tipografía ── */
  --font-heading: 'Teko', 'Impact', sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Escala tipográfica ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  4rem;       /* 64px */
  --text-6xl:  5.5rem;     /* 88px */

  /* ── Espaciado ── */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* ── Bordes ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.25);

  /* ── Transiciones ── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* ── Contenedor ── */
  --container-max:     1280px;
  --container-padding: var(--space-md);

  /* ── Navbar ── */
  --navbar-height-mobile:  64px;
  --navbar-height-desktop: 80px;

  /* ── Z-index ── */
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 200;
  --z-float:   300;
  --z-modal:   400;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-2xl);
  }
}