/* ═══════════════════════════════════════════════════════
   VIDA SALUDABLE — Design Tokens
   Fuente: .brand/DESIGN.md v1.1 + branding_dna.md v2.0
   Filosofía: "Organic Tech"
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─── COLORES ─── */
  --vs-green:           #3A9546;
  --vs-green-light:     #4AA153;
  --vs-green-dark:      #2E7A38;
  --vs-green-rgb:       58, 149, 70;

  --vs-sage:            #BAC5A7;
  --vs-sage-light:      #D4DDC8;
  --vs-cobalt:          #4A7A8C;
  --vs-cobalt-light:    #6B9AAC;

  --vs-bg-primary:      #F9F7F2;
  --vs-bg-secondary:    #EDE6DC;
  --vs-bg-card:         #FFFFFF;
  --vs-bg-hover:        rgba(58, 149, 70, 0.05);
  --vs-bg-green-subtle: rgba(58, 149, 70, 0.08);

  --vs-text-primary:    #2C2C2C;
  --vs-text-secondary:  #6B6B6B;
  --vs-text-muted:      #9B9B9B;
  --vs-text-inverse:    #F9F7F2;

  --vs-success:         #3A9546;
  --vs-error:           #C94C4C;
  --vs-warning:         #D4A944;
  --vs-info:            #4A7A8C;

  --vs-border:          #E5DDD3;
  --vs-border-light:    #F0EBE4;
  --vs-border-focus:    #3A9546;

  /* ─── TIPOGRAFÍA ─── */
  --font-heading:       'Plus Jakarta Sans', sans-serif;
  --font-body:          'Inter', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;

  --text-xs:            0.75rem;
  --text-sm:            0.875rem;
  --text-base:          1rem;
  --text-lg:            1.125rem;
  --text-xl:            1.25rem;
  --text-2xl:           1.5rem;
  --text-3xl:           1.875rem;
  --text-4xl:           2.5rem;
  --text-5xl:           3.25rem;

  --leading-tight:      1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.75;

  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  /* ─── SPACING (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;

  /* ─── SHAPES ─── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ─── SHADOWS (Organic = warm, ambient) ─── */
  --shadow-sm:   0 1px 2px rgba(44, 44, 44, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(44, 44, 44, 0.07),
                 0 2px 4px -2px rgba(44, 44, 44, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(44, 44, 44, 0.08),
                 0 4px 6px -4px rgba(44, 44, 44, 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(44, 44, 44, 0.08),
                 0 8px 10px -6px rgba(44, 44, 44, 0.04);
  --shadow-glow: 0 0 20px rgba(58, 149, 70, 0.15);
  --shadow-card: 0 2px 12px rgba(44, 44, 44, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(44, 44, 44, 0.10);

  /* ─── TRANSITIONS ─── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ─── LAYOUT ─── */
  --max-width:   1280px;
  --max-width-narrow: 960px;

  /* ─── Z-INDEX ─── */
  --z-base:     0;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
}