/* ============================================================
   GRUPO AES — BOCETO HOME
   styles.css — Design tokens, reset, layout, componentes
   ============================================================ */

/* ------------------------------------------------------------ */
/* 1. DESIGN TOKENS                                             */
/* ------------------------------------------------------------ */
:root {
  /* Brand — Grupo AES */
  --color-navy:       #162640;
  --color-navy-dark:  #0e1929;
  --color-navy-mid:   #1f3557;
  --color-red:        #e52d22;
  --color-red-dark:   #c02218;
  --color-gray:       #81868e;
  --color-gray-light: #d4d6d9;
  --color-light:      #f4f5f7;
  --color-white:      #ffffff;

  /* Empresa accent colors */
  --color-seguridad:  #1e4a7a;
  --color-limpieza:   #35a8e0;
  --color-comercial:  #2d7a3e;

  /* Typography */
  --font-heading:  'Montserrat', sans-serif;
  --font-body:     'Montserrat', sans-serif;

  /* Font sizes (fluid with clamp) */
  --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 2vw,   1rem);
  --text-base: clamp(1rem,     2vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  3vw,   1.75rem);
  --text-2xl:  clamp(1.5rem,   4vw,   2.25rem);
  --text-3xl:  clamp(2rem,     5vw,   3rem);
  --text-4xl:  clamp(2.5rem,   6vw,   4rem);
  --text-hero: clamp(2.75rem,  7vw,   5rem);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 5vw, 2.5rem);

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Transitions */
  --ease-default: 0.25s ease;
  --ease-slow:    0.4s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(22, 38, 64, 0.08);
  --shadow-md: 0 4px 20px rgba(22, 38, 64, 0.12);
  --shadow-lg: 0 8px 40px rgba(22, 38, 64, 0.18);
}