/* ─────────────────────────────────────────────────────────────────────────
   Imperquimia Centro — Design Tokens
   Variables CSS reutilizables para colores, tipografía, espaciado y motion.
   Cambios aquí se propagan al sitio completo.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Colores de marca ─────────────────────────────────────────── */
    --brand-green:        #4a8b2c;
    --brand-green-dark:   #367519;
    --brand-green-light:  #6ba84a;
    --brand-orange:       #ee7624;
    --brand-orange-dark:  #d4621b;
    --brand-orange-light: #f59450;

    /* Aliases legacy (compatibilidad con CSS anterior) */
    --main__color:        var(--brand-green);
    --secondary__color:   var(--brand-orange);

    /* ── Neutrales ────────────────────────────────────────────────── */
    --ink-900: #1a1d1f;       /* títulos */
    --ink-700: #3d3d3d;       /* texto principal */
    --ink-500: #6b7280;       /* texto secundario */
    --ink-300: #d1d5db;       /* borders */
    --ink-100: #f3f4f6;       /* fondos suaves */
    --ink-50:  #fafafa;
    --white:   #ffffff;

    /* ── Tipografía ───────────────────────────────────────────────── */
    --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Escala tipográfica por breakpoint: evita resize continuo por viewport. */
    --text-xs:   0.78rem;
    --text-sm:   0.9rem;
    --text-base: 1rem;
    --text-lg:   1.12rem;
    --text-xl:   1.28rem;
    --text-2xl:  1.55rem;
    --text-3xl:  2rem;
    --text-4xl:  2.35rem;
    --text-hero: 2.25rem;

    /* ── Espaciado (8px grid) ─────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Radios y sombras ─────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   8px;
    --radius-xl:   8px;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.18);
    --shadow-brand: 0 12px 32px rgba(74, 139, 44, 0.25);

    /* ── Layout ───────────────────────────────────────────────────── */
    --max-width: 1280px;
    --container-px: clamp(1rem, 4vw, 2rem);

    /* ── Motion ───────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   500ms;

    /* ── Z-index ──────────────────────────────────────────────────── */
    --z-nav:    100;
    --z-modal:  1000;
    --z-float:  500;
}

@media (min-width: 768px) {
    :root {
        --text-xs:   0.8rem;
        --text-sm:   0.94rem;
        --text-base: 1.04rem;
        --text-lg:   1.24rem;
        --text-xl:   1.45rem;
        --text-2xl:  1.85rem;
        --text-3xl:  2.45rem;
        --text-4xl:  3rem;
        --text-hero: 3.45rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --text-3xl:  2.75rem;
        --text-4xl:  3.5rem;
        --text-hero: 4.25rem;
    }
}

/* Soporte para prefers-reduced-motion (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}