/* ═══════════════════════════════════════════════════════════════
   GFW MALAYSIA — TOKENS DE DISEÑO (colores, tipografía, medidas)
   ───────────────────────────────────────────────────────────────
   ⚠️ ÚNICA FUENTE DE VERDAD para los colores del sitio.
   Los HEX se copiaron EXACTOS de _design-system/colors_and_type.css
   (la paleta oficial de la marca). No cambies un color aquí sin
   confirmar con la guía de marca.

   Para cambiar un color en TODO el sitio, edítalo solo aquí.
═══════════════════════════════════════════════════════════════ */

/* Tipografía oficial de la marca: Inter (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── COLORES PRINCIPALES (paleta oficial) ─────────────────── */
  --color-primario:        #0A8D38;  /* Verde vivo: botones, acentos, iconos */
  --color-primario-hover:  #087A2F;  /* Verde al pasar el mouse por botones */
  --color-primario-claro:  #1FA347;  /* Verde claro: acentos sobre fondos oscuros */
  --color-primario-legible: #4EC77D; /* Verde para TEXTO PEQUEÑO sobre oscuro (contraste AA) */
  --color-secundario:      #004227;  /* Verde bosque: nav, hero, footer, títulos */
  --color-secundario-oscuro: #00301D; /* Verde bosque hundido: footer, cierres */
  --color-tinte:           #E8F5EC;  /* Verde muy suave: fondos de sección y chips */
  --color-tinte-medio:     #DBEFE2;  /* Verde lavado: fondos que deben notarse */
  --color-crema:           #F5F0E6;  /* Crema cálido: secciones alternas */

  /* Alias con los nombres originales del design system
     (por si copias código de _design-system/, seguirá funcionando) */
  --color-primary:       var(--color-primario);
  --color-primary-hover: var(--color-primario-hover);
  --color-primary-400:   var(--color-primario-claro);
  --color-primary-dark:  var(--color-secundario);
  --color-primary-50-bg: var(--color-tinte);
  --color-cream:         var(--color-crema);

  /* Variantes con transparencia (mismo verde, distinta opacidad) */
  --color-primario-10:      #0A8D381A;
  --color-primario-20:      #0A8D3833;
  --color-primario-40:      #0A8D3866;
  --color-primario-70:      #0A8D38B3;
  --color-primario-90:      #0A8D38E6;
  --color-secundario-40:    #00422766;
  --color-secundario-60:    #00422799;
  --color-secundario-70:    #004227B3;  /* Overlay de imágenes del hero */
  --color-secundario-80:    #004227CC;
  --color-secundario-95:    #004227F2;

  /* ── NEUTROS (escala de grises oficial) ───────────────────── */
  --color-blanco:   #FFFFFF;
  --color-gris-50:  #F9FAFB;   /* Fondo de secciones alternas claras */
  --color-gris-100: #F3F4F6;
  --color-gris-200: #E5E7EB;   /* Bordes de tarjetas */
  --color-gris-300: #D1D5DB;   /* Bordes de campos de formulario */
  --color-gris-400: #9CA3AF;   /* Placeholders */
  --color-gris-500: #6B7280;   /* Texto secundario / captions */
  --color-gris-600: #4B5563;
  --color-gris-700: #374151;   /* Texto de párrafos */
  --color-gris-800: #1F2937;
  --color-gris-900: #111827;
  --color-negro:    #000000;

  /* ── SEMÁNTICOS (estados de formularios) ──────────────────── */
  --color-exito:        #0A8D38;
  --color-exito-fondo:  #F0FDF4;
  --color-exito-borde:  #BBF7D0;
  --color-error:        #EF4444;
  --color-error-oscuro: #DC2626;
  --color-error-fondo:  #FEF2F2;
  --color-error-borde:  #FECACA;

  /* ── TEXTO SOBRE FONDOS OSCUROS ───────────────────────────── */
  --texto-sobre-oscuro:      rgba(255, 255, 255, 0.85);
  --texto-sobre-oscuro-suave: rgba(255, 255, 255, 0.6);

  /* ── TIPOGRAFÍA ───────────────────────────────────────────── */
  --fuente: 'Inter', system-ui, -apple-system, sans-serif;

  --texto-xs:   0.75rem;   /* 12px — eyebrows, micro texto */
  --texto-sm:   0.875rem;  /* 14px — captions, footer */
  --texto-base: 1rem;      /* 16px — párrafos */
  --texto-lg:   1.125rem;  /* 18px — texto de introducción (lead) */
  --texto-xl:   1.25rem;   /* 20px */
  --texto-2xl:  1.5rem;    /* 24px — H3 */
  --texto-3xl:  1.875rem;  /* 30px — H2 */
  --texto-4xl:  2.25rem;   /* 36px — H1 en móvil */
  --texto-5xl:  3rem;      /* 48px — cifras destacadas */
  --texto-6xl:  3.75rem;   /* 60px — H1 en escritorio */

  /* ── ESPACIADO (base 4px, como el design system) ──────────── */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-20: 5rem;   /* Padding vertical de sección en móvil */
  --esp-28: 7rem;   /* Padding vertical de sección en escritorio */

  /* ── BORDES REDONDEADOS (regla de marca) ──────────────────── */
  --radio-sm:   0.125rem;  /* 2px  — botones (esquina "afilada", firma de marca) */
  --radio-md:   0.375rem;  /* 6px  — campos de formulario */
  --radio-lg:   0.5rem;    /* 8px  — tarjetas, chips de iconos */
  --radio-full: 9999px;    /* píldora — badges */

  /* ── SOMBRAS ──────────────────────────────────────────────── */
  --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ── LAYOUT Y MOVIMIENTO ──────────────────────────────────── */
  --contenedor-max: 80rem;  /* 1280px — ancho máximo del contenido */
  --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Única transición de marca */
}