/* LEUFÚ — design tokens (naranja + negro, como FUERZA32 v2)
   Fuentes (Google Fonts):
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap" rel="stylesheet">
*/
:root {
  /* Color: marca */
  --lf-rio: #141210;        /* negro, fondos oscuros y header de pack */
  --lf-rio-900: #120f0c;
  --lf-rio-600: #2a2622;
  --lf-coral: #e85a1c;      /* naranja puerto: CTA y tilde. Texto encima: --lf-tinta */
  --lf-coral-600: #c44512;  /* hover de CTA */
  --lf-coral-700: #c44512;  /* naranja para texto/links sobre fondos claros */
  --lf-fuel: #e85a1c;       /* highlight: proteína, badges (mismo naranja) */
  --lf-crema: #f3efe6;      /* fondo claro / paper */
  --lf-arena: #e7e0d2;      /* fondo secundario / tarjetas */
  --lf-tinta: #141210;      /* texto principal */
  --lf-gris: #6b645a;       /* texto secundario */
  --lf-linea: rgba(20, 18, 16, 0.12);
  --lf-hero-grad: linear-gradient(118deg, #120f0c 0%, #2e1d14 45%, #e85a1c 120%);

  /* Color: semántica */
  --lf-bg: var(--lf-crema);
  --lf-surface: #ffffff;
  --lf-text: var(--lf-tinta);
  --lf-text-muted: var(--lf-gris);
  --lf-link: var(--lf-coral-700);
  --lf-cta-bg: var(--lf-coral);
  --lf-cta-bg-hover: var(--lf-coral-600);
  --lf-cta-text: var(--lf-tinta);
  --lf-focus: var(--lf-rio);
  --lf-focus-on-dark: var(--lf-crema);
  --lf-error: #b42318;
  --lf-success: #2a2622;

  /* Tipografía */
  --lf-font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --lf-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lf-text-xs: 0.75rem;   /* 12 */
  --lf-text-sm: 0.875rem;  /* 14 */
  --lf-text-base: 1rem;    /* 16 */
  --lf-text-lg: 1.125rem;  /* 18 */
  --lf-text-xl: 1.375rem;  /* 22 */
  --lf-text-2xl: 1.75rem;  /* 28 */
  --lf-text-3xl: clamp(2rem, 5vw, 2.75rem);
  --lf-text-4xl: clamp(2.5rem, 7vw, 4.5rem);
  --lf-leading-tight: 1.02;
  --lf-leading-snug: 1.2;
  --lf-leading-body: 1.55;
  --lf-tracking-display: -0.02em;
  --lf-tracking-label: 0.12em;

  /* Espaciado (base 4) */
  --lf-space-1: 0.25rem;
  --lf-space-2: 0.5rem;
  --lf-space-3: 0.75rem;
  --lf-space-4: 1rem;
  --lf-space-5: 1.5rem;
  --lf-space-6: 2rem;
  --lf-space-7: 3rem;
  --lf-space-8: 4rem;
  --lf-space-9: 6rem;
  --lf-container: 1180px;
  --lf-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Radios, bordes, sombras */
  --lf-radius-sm: 8px;
  --lf-radius-md: 14px;
  --lf-radius-lg: 24px;
  --lf-radius-pill: 999px;
  --lf-border: 2px solid var(--lf-tinta);
  --lf-shadow-card: 0 1px 0 rgba(20, 18, 16, 0.06), 0 12px 32px -18px rgba(20, 18, 16, 0.45);
  --lf-shadow-pop: 6px 6px 0 var(--lf-tinta);

  /* Movimiento */
  --lf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lf-dur-fast: 140ms;
  --lf-dur: 240ms;

  /* Controles */
  --lf-tap: 48px;           /* alto mínimo de botones e inputs */
  --lf-focus-ring: 0 0 0 3px var(--lf-crema), 0 0 0 6px var(--lf-focus);
}