/* ==========================================================================
   Tokens de diseño — PyCon Panamá 2026
   Única fuente de verdad para color, tipografía, espaciado y elevación.
   No escribir valores literales en el resto de las hojas: usar estas variables.
   ========================================================================== */

:root {
  /* --- Color: superficies ------------------------------------------------ */
  --bg: #f4f8ff;
  --surface: #ffffff;
  --surface-muted: #eef4ff;

  /* --- Color: marca ------------------------------------------------------ */
  --accent: #2f8cff;
  --accent-hover: #1c6ed6;
  --accent-soft: rgba(47, 140, 255, 0.10);
  --accent-softer: rgba(47, 140, 255, 0.05);
  --highlight: #ffca3a;

  /* --- Color: texto ------------------------------------------------------ */
  --text: #111827;
  --text-secondary: #4b5563;
  --text-on-accent: #ffffff;

  /* --- Color: bordes ----------------------------------------------------- */
  --border: rgba(47, 140, 255, 0.18);
  --border-soft: rgba(47, 140, 255, 0.10);

  /* --- Tipografía -------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: se adapta sola entre móvil y escritorio */
  --fs-xs: 0.8125rem;                         /* 13px  — etiquetas */
  --fs-sm: 0.9375rem;                         /* 15px  — texto auxiliar */
  --fs-base: 1rem;                            /* 16px  — cuerpo */
  --fs-md: clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --fs-lg: clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem);
  --fs-h3: clamp(1.1875rem, 0.5vw + 1.1rem, 1.3125rem);
  --fs-h2: clamp(1.75rem, 2.2vw + 1.1rem, 2.75rem);
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.7;

  /* --- Espaciado (escala de 4px) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Ritmo vertical de las secciones: fluido entre móvil y escritorio */
  --section-y: clamp(48px, 7vw, 96px);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1160px;      /* ancho útil del contenido */
  --container-gutter: 24px;     /* margen lateral mínimo */
  --measure: 68ch;              /* ancho máximo de un párrafo legible */
  --header-h: 72px;

  /* --- Radios ------------------------------------------------------------ */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Elevación --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 12px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 8px 24px rgba(47, 140, 255, 0.12);
  --shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.10);

  /* --- Movimiento -------------------------------------------------------- */
  --transition: 0.2s ease;

  /* --- Foco (accesibilidad) ---------------------------------------------- */
  --focus-ring: 3px solid var(--accent);
  --focus-offset: 3px;
}