/* ==========================================================================
   PROSERMAT — Premium Design Tokens 2026
   --------------------------------------------------------------------------
   FASE 1 · Capa fundacional de tokens globales (Plan UX/UI 2026).
   Define la paleta institucional ampliada (verdes, tierras, minerales,
   neutros, semánticos), superficies, espaciado, radios, sombras,
   transiciones, capas (z-index) y constantes de layout.

   Orden de carga (en layout.php):
     styles.css  →  premium-tokens-2026.css  →  premium-typography-2026.css
                 →  premium-buttons-2026.css →  premium-storefront.css (+ resto)

   Este archivo NO contiene reglas — sólo `:root { --var: value }`.
   ========================================================================== */

:root {

  /* ── VERDE MARCA · 11 tonos ─────────────────────────────────────────── */
  --color-brand-950: #0a2e1a;
  --color-brand-900: #0f4529;
  --color-brand-800: #155c38;
  --color-brand-700: #1a7344;
  --color-brand-600: #1f7a4d;   /* color institucional histórico */
  --color-brand-500: #22a05e;
  --color-brand-400: #3dc97e;
  --color-brand-300: #6ddca0;
  --color-brand-200: #a8edcb;
  --color-brand-100: #d4f6e5;
  --color-brand-50:  #edfaf3;

  /* ── TIERRAS · agroquímica / suelo / mineral ─────────────────────────── */
  --color-earth-800: #4a2c0a;
  --color-earth-600: #7c4a1e;
  --color-earth-400: #bf7a3a;
  --color-earth-200: #e8c98a;
  --color-earth-100: #f7eed6;

  /* ── MINERALES · acentos secundarios ─────────────────────────────────── */
  --color-mineral-blue:  #1e5fa3;
  --color-mineral-white: #f0f0ee;
  --color-mineral-gray:  #6e7a8a;

  /* ── NEUTROS ─────────────────────────────────────────────────────────── */
  --color-neutral-950: #0e0e0c;
  --color-neutral-900: #1a1a17;
  --color-neutral-700: #3a3a35;
  --color-neutral-500: #6b6b62;
  --color-neutral-300: #b4b4a8;
  --color-neutral-100: #f2f2ee;
  --color-neutral-50:  #f9f9f6;

  /* ── SEMÁNTICOS ──────────────────────────────────────────────────────── */
  --color-success: #1f7a4d;
  --color-warning: #bf7a3a;
  --color-error:   #c0392b;
  --color-info:    #1e5fa3;

  /* ── SUPERFICIES ─────────────────────────────────────────────────────── */
  --surface-page:   #faf9f6;
  --surface-card:   #ffffff;
  --surface-subtle: #f4f4ef;
  --surface-dark:   #111a14;

  /* ── ESPACIADO · escala base 4px ─────────────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;

  /* ── RADIOS ──────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ── SOMBRAS · escala calibrada para fondo claro ─────────────────────── */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:    0 2px 4px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md:    0 4px 10px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .05);
  --shadow-lg:    0 10px 20px rgba(15, 23, 42, .09), 0 4px 8px rgba(15, 23, 42, .05);
  --shadow-xl:    0 20px 32px rgba(15, 23, 42, .12), 0 8px 16px rgba(15, 23, 42, .06);
  --shadow-2xl:   0 28px 50px rgba(15, 23, 42, .18);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, .06);
  /* Acento institucional para CTAs primarios */
  --shadow-brand-sm: 0 4px 10px rgba(31, 122, 77, .22);
  --shadow-brand-md: 0 10px 22px rgba(31, 122, 77, .26);
  --shadow-brand-lg: 0 18px 36px rgba(31, 122, 77, .30);
  /* Focus-ring (a11y) */
  --shadow-focus: 0 0 0 3px rgba(31, 122, 77, .35);

  /* ── TRANSICIONES ────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);

  /* ── Z-INDEX · capas ─────────────────────────────────────────────────── */
  --z-base:       0;
  --z-elevated:   10;
  --z-sticky:     100;
  --z-header:     500;
  --z-banner:     600;
  --z-drawer:     800;
  --z-modal:      900;
  --z-toast:      1000;
  --z-fab:        950;
  --z-tooltip:    1100;

  /* ── LAYOUT · contenedores y breakpoints (referencia) ────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1240px;
  --container-2xl:  1440px;
  --container-max:  1240px;
  --container-gutter: clamp(16px, 4vw, 32px);
  --header-height:    72px;
  --header-height-sm: 60px;

  /* ── OPACIDADES auxiliares ───────────────────────────────────────────── */
  --opacity-0:  0;
  --opacity-25: .25;
  --opacity-50: .5;
  --opacity-75: .75;
  --opacity-90: .9;

  /* ── LINE-HEIGHTS y LETTER-SPACING (acompañan a tipografía) ──────────── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

}