/*
 * variables.css
 * ─────────────────────────────────────────────────────
 * Design tokens: colores, tipografía, espaciado, sombras.
 * Cambia un valor aquí y se refleja en TODA la app.
 * ─────────────────────────────────────────────────────
 */

:root {
  /* ── Paleta de marca ── */
  --color-verde:        #3d6b4f;
  --color-verde-dark:   #2a4d38;
  --color-verde-light:  #e8f0eb;

  --color-cafe:         #7c5c3e;
  --color-cafe-light:   #f5ede3;

  --color-crema:        #faf6f0;
  --color-tierra:       #c4956a;
  --color-tierra-light: #fdf0e4;
  --color-musgo:        #5c7a5c;

  --color-negro:        #1e1a16;
  --color-gris:         #6b6560;
  --color-gris-light:   #f0ebe4;
  --color-gris-med:     #e0d9d0;

  --color-blanco:       #fffef9;

  --color-rojo:         #9b3a2a;
  --color-rojo-light:   #fdecea;

  --color-dorado:       #c9972a;
  --color-dorado-light: #fff9c4;

  /* ── Tipografía ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

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

  /* ── Bordes y radios ── */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── Sombras ── */
  --shadow:    0 2px 12px rgba(60, 40, 20, 0.10);
  --shadow-lg: 0 8px 32px rgba(60, 40, 20, 0.15);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.25);

  /* ── Layout ── */
  --topbar-height:  56px;
  --sidebar-width:  220px;
  --sidebar-collapsed: 56px;

  /* ── Transiciones ── */
  --transition-fast: 0.15s ease;
  --transition:      0.20s ease;
  --transition-slow: 0.30s ease;
}