/*
 * variables.css — Tokens de diseño globales de Tribu Sin Gluten
 *
 * EDITAR AQUI para cambiar la paleta, tipografia o espaciado de todo el sitio.
 * Todos los demas archivos CSS consumen estas variables.
 */

:root {
  /* --- Paleta de color principal --- */
  --color-primary:       #2d7a3a;   /* Verde bosque */
  --color-primary-dark:  #1e5628;   /* Verde oscuro hover */
  --color-primary-light: #4caf60;   /* Verde claro acento */
  --color-primary-alpha: rgba(45, 122, 58, 0.1);

  /* --- Paleta dorada (acento) --- */
  --color-gold:          #c9a84c;
  --color-gold-light:    #e8c96d;
  --color-gold-alpha:    rgba(201, 168, 76, 0.15);

  /* --- Neutros --- */
  --color-cream:         #faf7f0;   /* Fondo general */
  --color-white:         #ffffff;
  --color-dark:          #1a1a1a;   /* Texto principal */
  --color-gray:          #6b7280;   /* Texto secundario */
  --color-gray-light:    #f3f4f6;
  --color-border:        #e5e7eb;

  /* --- Semanticos --- */
  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #2563eb;

  /* --- Tipografia --- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* --- Espaciado --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* --- Bordes y sombras --- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.18);

  /* --- Transiciones --- */
  --transition:      0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;

  /* --- Layout --- */
  --max-width:          1280px;
  --content-width:      860px;
  --sidebar-width:      340px;
  --header-height:      72px;
  --container-padding:  24px;
}

/* Responsive: ajustar tokens en mobile */
@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
    --space-2xl:         40px;
  }
}