/* ============================================================
   MEDIGHAN — SISTEMA DE DISEÑO
   Tokens base. Cambia aquí y se actualiza TODO el sitio.
   ============================================================ */

:root {
  /* ─── PALETA: VERDES MEDIGHAN ─────────────────────────── */
  --color-forest:        #1e5631;
  --color-forest-dark:   #154021;
  --color-sage:          #4a9d5f;
  --color-sage-soft:     #7fb88f;
  --color-mint:          #c8e0d0;
  --color-leaf:          #e8f3ec;

  /* ─── FONDOS Y NEUTROS ────────────────────────────────── */
  --color-bg:            #ffffff;
  --color-cream:         #faf8f3;
  --color-ivory:         #f5f0e6;
  --color-lavender:      #f3eef5;
  --color-peach:         #f9ede4;
  --color-charcoal:      #2c2c2c;

  /* ─── TEXTO ──────────────────────────────────────────── */
  --text-primary:        #2c2c2c;
  --text-secondary:      #6b6b6b;
  --text-muted:          #999999;
  --text-inverse:        #ffffff;
  --text-accent:         var(--color-forest);

  /* ─── UI ──────────────────────────────────────────────── */
  --border:              #e5e5e5;
  --border-soft:         #f0f0f0;
  --success:             #2d7a4a;
  --warning:             #f5b800;
  --danger:              #c0392b;
  --star:                #f5b800;

  /* ─── TIPOGRAFÍA ──────────────────────────────────────── */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-script:  'Caveat', cursive;

  /* ─── ESCALA TIPOGRÁFICA ─────────────────────────────── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.5rem;
  --fs-5xl:  3.25rem;
  --fs-6xl:  4rem;
  --fs-7xl:  5rem;

  /* ─── PESOS ──────────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── ESPACIADO (escala de 4px) ──────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── BORDES REDONDEADOS ─────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-2xl:   36px;
  --radius-pill:  999px;
  --radius-circle: 50%;

  /* ─── SOMBRAS ────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px  rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-green: 0 8px 24px rgba(30, 86, 49, 0.15);
  --shadow-glow:  0 0 40px rgba(74, 157, 95, 0.25);

  /* ─── TRANSICIONES ───────────────────────────────────── */
  --t-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── LAYOUT ─────────────────────────────────────────── */
  --container-max: 1280px;
  --container-px:  24px;
  --header-height: 88px;

  /* ─── Z-INDEX ────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-header:  500;
  --z-modal:   1000;
  --z-toast:   1500;
}