/* ════════════════════════════════════════════════════════
   REDLEMON — variables.css
   Tokens de diseño: colores, tipografía, espaciado, layout
════════════════════════════════════════════════════════ */

:root {
  /* Colores — valores de marca RedLemon */
  --color-primary:       #e03535;              /* Rojo corporativo principal */
  --color-primary-light: rgba(224,53,53,0.12); /* Rojo muy suave (fondos) */
  --color-primary-mid:   rgba(224,53,53,0.28); /* Rojo medio (bordes) */
  --color-primary-dark:  #c02828;              /* Rojo oscuro (hover) */
  --color-accent:        #FFE000;              /* Amarillo corporativo */
  --color-accent-bg:     rgba(255,224,0,0.1);  /* Amarillo muy suave (fondos) */
  --color-success:       #4caf50;              /* Verde de éxito / positivo */

  /* Colores de texto */
  --color-text:          #eef0f6;  /* Texto principal */
  --color-text-light:    #a0a4b8;  /* Texto secundario */
  --color-text-muted:    #7a7e96;  /* Texto apagado, placeholders */

  /* Colores de fondo */
  --color-bg:            #0d0f18;  /* Fondo principal */
  --color-bg-alt:        #111420;  /* Fondo alternativo (secciones) */
  --color-bg-raised:     #181c2a;  /* Fondo elevado (tarjetas) */
  --color-border:        #1e2130;  /* Bordes y separadores */

  /* Tipografía */
  --font-heading:     'Cabinet Grotesk', sans-serif;
  --font-body:        'Manrope', sans-serif;
  --font-mono:        'IBM Plex Mono', monospace;
  --font-size-base:   1rem;        /* 16px */
  --font-size-body:   1.0625rem;   /* 17px */
  --line-height-base: 1.65;

  /* Espaciado */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  4rem;      /* 64px */
  --space-2xl: 8rem;      /* 128px */

  /* Layout */
  --max-width: 80rem;

  /* Radios */
  --border-radius:     0.5rem;
  --border-radius-md:  1rem;
  --border-radius-lg:  1.5rem;
  --border-radius-xl:  2rem;
  --border-radius-2xl: 3rem;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4),  0 4px 16px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5),  0 12px 40px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6),  0 24px 64px rgba(0,0,0,0.45);

  /* Texto sobre superficies saturadas (compare-card--rl, drenched, callouts) */
  --color-text-on-saturated-85: rgba(238, 240, 246, 0.85);
  --color-text-on-saturated-70: rgba(238, 240, 246, 0.7);
  --color-text-on-saturated-60: rgba(238, 240, 246, 0.6);
  --color-text-on-saturated-50: rgba(238, 240, 246, 0.5);

  /* Variante clara de Lemon Pulp Red para texto sobre fondos teñidos de rojo */
  --color-primary-soft: #ff8585;

}