/*
 * variables.css — Custom Properties CSS
 * Tourmalet Child Theme
 * ════════════════════════════════════════════════════════════════
 * FUENTE DE VERDAD para todos los tokens de diseño.
 * Importar en Elementor Kit: Global → Colores y Tipografía.
 * ════════════════════════════════════════════════════════════════
 */

:root {

  /* ── Paleta oscura ─────────────────────────────────────────── */
  --black:    #0a0a0a;
  --dark:     #111111;
  --charcoal: #1a1a1a;

  /* ── Paleta clara ──────────────────────────────────────────── */
  --white:    #ffffff;
  --offwhite: #f7f6f3;
  --gray-50:  #f2f1ee;
  --gray-100: #e8e6e1;
  --gray-200: #d4d1ca;
  --gray-500: #8a8680;
  --gray-700: #4a4845;

  /* ── Marca — Amarillo Tourmalet ────────────────────────────── */
  --yellow:      #F5C400;
  --yellow-dark: #d4a900;
  --yellow-mid:  #e8b800;
  --yellow-alpha-10: rgba(245, 196, 0, 0.10);
  --yellow-alpha-15: rgba(245, 196, 0, 0.15);
  --yellow-alpha-30: rgba(245, 196, 0, 0.30);
  --yellow-alpha-45: rgba(245, 196, 0, 0.45);

  /* ── Texto sobre fondos claros ─────────────────────────────── */
  --text-dark:  #1a1814;
  --text-mid:   #4a4845;
  --text-light: #7a7570;

  /* ── Tipografía ────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;   /* Títulos grandes */
  --font-head:    'Barlow Condensed', sans-serif; /* Subtítulos / UI */
  --font-body:    'Barlow', sans-serif;           /* Párrafos */

  /* ── Transiciones ──────────────────────────────────────────── */
  --transition:      0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s ease;
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Espaciado base ────────────────────────────────────────── */
  --section-py:      100px;   /* padding vertical de secciones */
  --section-py-sm:   80px;    /* secciones compactas (ODS) */
  --container-max:   1200px;
  --container-wide:  1440px;
  --container-px:    24px;

  /* ── Breakpoints (referencia — usar en @media) ─────────────── */
  /* --bp-xl: 1200px */
  /* --bp-lg: 1024px */
  /* --bp-md: 768px  */
  /* --bp-sm: 480px  */

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.25);

  /* ── Z-index layers ────────────────────────────────────────── */
  --z-base:     1;
  --z-overlay:  10;
  --z-header:   100;
  --z-modal:    200;
  --z-toast:    300;

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/*
 * ── Sección oscura — ajustes de color automáticos ─────────────
 * Las secciones con clase .on-dark heredan el contexto de color correcto.
 * Elementor: agregar clase CSS "on-dark" al contenedor de la sección.
 */
.on-dark {
  --tag-color:   var(--yellow);
  --link-color:  var(--yellow);
  --text-color:  rgba(255, 255, 255, 0.85);
  --muted-color: rgba(255, 255, 255, 0.55);
}

.on-light {
  --tag-color:   var(--yellow-mid);
  --link-color:  var(--yellow-mid);
  --text-color:  var(--text-dark);
  --muted-color: var(--text-light);
}