/* ==========================================================================
   GRUPO GESA – Design Tokens
   Fuente única de verdad para el sistema de diseño
   ========================================================================== */

:root {

  /* ========================================
     COLORES
     ======================================== */

  /* Acento – Verde GESA */
  --color-accent:       #a3c04a;
  --color-accent-dark:  #85a03a;
  --color-accent-light: #b8d265;
  --color-accent-rgb:   163, 192, 74;

  /* Fondos */
  --color-bg-body:    #0d1a10;
  --color-bg-dark:    #091209;
  --color-bg-section: #111f14;
  --color-bg-card:    #162019;
  --color-bg-light:   #f4f7f0;

  /* Texto */
  --color-text:         #c8d4c0;
  --color-text-muted:   rgba(200, 212, 192, 0.65);
  --color-text-inverse: #ffffff;
  --color-heading:      #ffffff;

  /* UI */
  --color-border:       rgba(163, 192, 74, 0.25);
  --color-border-accent: #a3c04a;
  --color-overlay:      rgba(9, 18, 9, 0.72);

  /* Estados */
  --color-success: #22c55e;
  --color-error:   #ef4444;
  --color-warning: #f59e0b;

  /* ========================================
     TIPOGRAFÍA
     ======================================== */

  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tamaños – Mobile First */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */

  --text-hero:  clamp(2.5rem, 6vw, 5rem);
  --text-title: clamp(1.75rem, 4vw, 2.75rem);

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Font Weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* ========================================
     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 */
  --space-5xl: 8rem;       /* 128px */

  /* ========================================
     LAYOUT
     ======================================== */

  --container-max:     1280px;
  --container-padding: var(--space-md);

  /* ========================================
     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.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* ========================================
     TRANSICIONES
     ======================================== */

  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;
}

/* Padding de contenedor responsivo */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-lg);
  }
}

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