/* =========================================================
   IntelAgro Landing — Design System · Tokens (Capa 1)
   Variables, reset, base, layout, tipografia, utilidades.
   Valores preservados del sitio original (clon intelagro.mx).
   Naming: --{categoria}-{nombre}[-{variante}]
   ========================================================= */

:root {
  /* ── Raw palette (verde IntelAgro + neutros) ── */
  --color-green-500:   #39b56f;  /* verde principal      */
  --color-green-700:   #0d7a4a;  /* verde oscuro         */
  --color-green-100:   #dff8eb;  /* verde claro fondo    */
  --color-ink-900:     #222222;  /* texto principal      */
  --color-ink-600:     #5c5c5c;  /* texto secundario     */
  --color-gray-200:    #e4e6e8;  /* borde sutil          */
  --color-gray-50:     #f7f8f8;  /* gris agricola suave  */
  --color-white:       #ffffff;

  /* Sombras de marca (derivadas del verde 500 = rgb 57,181,111) */
  --color-green-shadow-25: rgba(57, 181, 111, 0.25);
  --color-green-shadow-30: rgba(57, 181, 111, 0.30);
  --color-green-shadow-15: rgba(57, 181, 111, 0.15);
  --color-black-shadow-08: rgba(0, 0, 0, 0.08);

  /* ── Brand aliases (IntelAgro — decisiones inteligentes) ── */
  --brand-hoja:    var(--color-green-500);  /* accion, decision inteligente */
  --brand-raiz:    var(--color-green-700);  /* profundidad, contraste       */
  --brand-campo:   var(--color-green-100);  /* terreno, fondo suave         */

  /* ── Semantic: lo unico que consumen los componentes ── */
  --color-bg:           var(--color-white);
  --color-bg-soft:      var(--color-gray-50);
  --color-bg-accent:    var(--color-green-100);
  --color-text:         var(--color-ink-900);
  --color-text-soft:    var(--color-ink-600);
  --color-heading:      var(--color-green-700);
  --color-accent:       var(--color-green-500);
  --color-accent-hover: var(--color-green-700);
  --color-border:       var(--color-gray-200);
  --color-on-accent:    var(--color-white);

  /* ── Tipografia ── */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  --text-sm:     0.9rem;                    /* footer            */
  --text-base:   1rem;                      /* body              */
  --text-lg:     1.15rem;                   /* subtitulo hero    */
  --text-2xl:    1.9rem;                    /* titulo de seccion */
  --text-hero:   clamp(2rem, 5vw, 3rem);    /* h1 hero           */
  --text-stat:   4rem;                      /* cifra destacada   */
  --text-stat-fluid: clamp(1.7rem, 6vw, 2.8rem); /* cifra fluida (calc/hero) */

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-body:   1.6;

  /* ── Espaciado ── */
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   18px;
  --space-6:   20px;
  --space-7:   22px;
  --space-8:   28px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  50px;

  /* ── Forma y elevacion ── */
  --radius:        16px;
  --shadow:        0 10px 30px var(--color-black-shadow-08);
  --shadow-brand:  0 6px 18px var(--color-green-shadow-25);
  --shadow-hover:  0 8px 20px var(--color-green-shadow-30);
  --shadow-card:   0 10px 30px var(--color-green-shadow-15);

  /* ── Layout ── */
  --container-section: 1100px;   /* ancho max de seccion */
  --container-text:    740px;    /* ancho max de parrafo */

  /* ── Movimiento ── */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.25s ease;
}

/* ── Reset + base ── */
* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-body);
}

img { max-width: 100%; }

/* ── Layout ── */
.container {
  max-width: var(--container-section);
  margin: 0 auto;
}

/* ── Utilidades (<= 10) ── */
.u-center      { text-align: center; }
.u-text-soft   { color: var(--color-text-soft); }
.u-measure     { max-width: var(--container-text); margin-left: auto; margin-right: auto; }