/*
  Sistema de diseño ENERSYS PERÚ — variables globales.

  Jerarquía cromática:
  1. Fondos: blanco y gris claro.   2. Texto: gris carbón.
  3. Verde de marca #7BB62D: SOLO como fondo de botones principales (con texto carbón, 4.98:1) y detalles.
     Nunca como texto sobre blanco (2.45:1, no pasa).
  4. Verde profundo #237A3B: textos de acento y estados activos sobre claro (5.36:1), fondo sólido con texto blanco.
  5. Verde oliva #8BA861: tono secundario, apoyo en gráficos.
  6. Azul #4A90E2: solo elementos gráficos de tecnología (3.29:1 sobre blanco, no se usa para texto).
  7. Dorado #F5B041: reservado para ofertas reales. Hoy no se usa porque no hay ofertas verificadas.
  8. Cálido #E6A177: reservado para recursos gráficos humanos. Hoy no se usa.

  Ajustes por accesibilidad respecto a la paleta del brief:
  - Texto secundario: #5C6670 (5.85:1 sobre blanco), derivado del carbón.
  - Hover del botón primario: #8CC63E, un verde más claro que mantiene el contraste con el texto carbón.
*/

:root {
    /* Colores de marca y complementarios */
    --c-green: #7bb62d;
    --c-green-hover: #8cc63e;
    --c-ink: #2f363f;
    --c-olive: #8ba861;
    --c-warm: #e6a177;
    --c-gold: #f5b041;
    --c-deep: #237a3b;
    --c-deep-hover: #1b5f2d;
    --c-blue: #4a90e2;
    --c-gray: #f4f6f7;
    --c-white: #ffffff;

    /* Derivados */
    --c-ink-2: #3c4651;
    --c-ink-3: #1e2329;
    --c-muted: #5c6670;
    --c-line: #dde2e6;
    --c-line-strong: #c7ced3;
    --c-on-dark: #ffffff;
    --c-on-dark-muted: #c9d1d8;
    --c-error: #b3261e;
    --c-focus: #237a3b;

    /* Tipografía (fuentes del sistema; ver README para autoalojar Manrope/Sora) */
    --font-sans: "Manrope", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Sora", "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --fs-xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
    --fs-2xl: clamp(2rem, 1.4rem + 2.9vw, 3.5rem);
    --fs-hero: clamp(2.125rem, 1.4rem + 3.6vw, 4.125rem);

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-body: 1.6;

    /* Radios */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Sombras */
    --sh-1: 0 1px 2px rgba(47, 54, 63, 0.06), 0 4px 14px rgba(47, 54, 63, 0.06);
    --sh-2: 0 2px 4px rgba(47, 54, 63, 0.06), 0 14px 34px rgba(47, 54, 63, 0.12);
    --sh-focus: 0 0 0 3px rgba(35, 122, 59, 0.35);

    /* Espaciado */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 6.5rem;
    --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

    /* Anchuras */
    --container: 1200px;
    --container-narrow: 820px;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

    /* Capas */
    --z-header: 50;
    --z-nav: 55;
    --z-drawer: 80;
    --z-toast: 90;
    --z-skip: 100;

    /* Animación */
    --d-fast: 150ms;
    --d-base: 280ms;
    --d-slow: 640ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}