/* ============================================================
   variables.css — Sistema de diseño CFE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');

:root {
  --cfe-verde:         #00A651;
  --cfe-verde-oscuro:  #007A3D;
  --cfe-verde-medio:   #009244;
  --cfe-verde-claro:   #E8F5EE;
  --cfe-verde-hover:   #006830;

  --blanco:            #FFFFFF;
  --gris-100:          #F5F6F7;
  --gris-200:          #EAECEE;
  --gris-300:          #D5D8DC;
  --gris-400:          #B2B9C0;
  --gris-500:          #7F8C8D;
  --gris-600:          #4A5568;
  --gris-700:          #2D3748;
  --negro:             #1A1A1A;

  --color-peligro:     #C0392B;
  --color-peligro-bg:  #FDEDEC;
  --color-alerta:      #D35400;
  --color-alerta-bg:   #FEF5E7;
  --color-ok:          #1E8449;
  --color-ok-bg:       #EAFAF1;
  --color-info:        #1A5276;
  --color-info-bg:     #EBF5FB;

  --gob-dorado:        #C8A951;
  --gob-vino:          #9B2335;
  --gob-gris:          #4A5D6B;

  --font-titulo:  'Montserrat', sans-serif;
  --font-cuerpo:  'Open Sans', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --sp-1:  0.25rem;  --sp-2:  0.5rem;
  --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;

  --radio-sm:   4px;   --radio-md:  8px;
  --radio-lg:   12px;  --radio-xl:  16px;
  --radio-pill: 999px;

  --sombra-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --sombra-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --sombra-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);

  --trans-base: all 0.2s ease;
  --trans-slow: all 0.35s ease;

  --header-h:       64px;
  --topbar-h:       36px;
  --contenedor-max: 1200px;
}