/* design-tokens.css — Tokens globales DESIGN.md (shared/DESIGN.md) */
/* Cargar ANTES que el resto del CSS para que :root este disponible. */
/* NO editar ni duplicar; cualquier cambio debe partir de shared/DESIGN.md y aplicarse a todos los proyectos */

:root {

  /* ============================================================
     SECTION 2 — COLOR PALETTE
     Fuente: shared/DESIGN.md section 2
     ============================================================ */

  /* Primary Brand — Verdes */
  --green-dark:    #2D5016;
  --green:         #3D6B1E;
  --green-brand:   #8BA841;
  --green-light:   #A4C256;
  --green-bg:      #F0F4E8;

  /* Secondary — Dorados (Premium/CTA) */
  --gold:          #C8A84E;
  --gold-light:    #E8D48A;

  /* Accent — Rojos (Solo urgencia) */
  --red-urgency:   #C0392B;
  --red-urgency-2: #E74C3C;

  /* Text Scale */
  --text:          #1A1A1A;
  --text-sec:      #555555;
  --text-muted:    #777777;
  --text-meta:     #888888;

  /* Surface & Borders */
  --bg:            #FFFFFF;
  --bg-hover:      #F9FBF5;
  --bg-alt:        #F5F7F0;
  --border:        #E8E8E8;
  --border-sec:    #DDDDDD;
  --footer-bg:     #1A1A1A;

  /* ============================================================
     SECTION 5 — SPACING SYSTEM
     Unidad base: 8px
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;

  /* ============================================================
     SECTION 5 — BORDER RADIUS SCALE
     ============================================================ */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ============================================================
     SECTION 6 — SHADOW SCALE
     Shadow philosophy: use rgba(45,80,22,x) green tint,
     never pure black. Warm, organic elevation.
     ============================================================ */

  --shadow-none:      none;
  --shadow-whisper:   rgba(45,80,22,0.03) 0px 0px 0px 1px;
  --shadow-card:      rgba(45,80,22,0.04) 0 0 0 1px, rgba(45,80,22,0.06) 0 2px 6px, rgba(0,0,0,0.08) 0 4px 8px;
  --shadow-hover:     rgba(45,80,22,0.10) 0 4px 12px, rgba(0,0,0,0.06) 0 2px 4px;
  --shadow-elevated:  rgba(45,80,22,0.15) 0 30px 45px -30px, rgba(0,0,0,0.08) 0 18px 36px -18px;
  --shadow-cta:       0 4px 16px rgba(200,168,78,0.3);
  --shadow-cta-hover: 0 6px 24px rgba(200,168,78,0.45);
  --shadow-focus:     0 0 0 3px rgba(139,168,65,0.25);

  /* ============================================================
     SECTION 6 — TRANSITIONS & MOTION
     ============================================================ */

  --transition-fast:     150ms ease;
  --transition-base:     200ms ease;
  --transition-slow:     300ms ease;
  --transition-entrance: 400ms ease-out;
  --hover-lift:          translateY(-2px);
  --active-press:        scale(0.95);

  /* ============================================================
     SECTION 3 — TYPOGRAPHY
     ============================================================ */

  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", serif;

}