/* Lysafe · design tokens — Personal Care Products (submarca Roux Corporation).
   Identidad: limpio, fresco, confiable. Primario CYAN del logo (#00aabf);
   complementan el NAVY y el ROJO de Roux. Single source of truth visual. */

:root {
  /* ---- Brand palette (Lysafe) ---- */
  --rx-cyan:        #00aabf;   /* primario · CTAs, rules, links, activo (color del logo) */
  --rx-cyan-dark:   #0090a3;   /* hover/active */
  --rx-cyan-deep:   #007588;   /* texto cyan sobre claro / detalle */
  --rx-cyan-50:     #e6f7fa;   /* lavado cyan para fondos suaves */

  --rx-navy:        #16335f;   /* complemento Roux · headings, bandas oscuras */
  --rx-navy-deep:   #0f2547;   /* bandas profundas */
  --rx-red:         #e1251b;   /* acento Roux · badges/detalles puntuales */
  --rx-red-deep:    #b81d15;   /* hover del acento rojo */

  --rx-ink-900:     #14253d;   /* near-navy-black (headings fuertes) */
  --rx-band:        var(--rx-navy);  /* dark bands (card title bars, footer bottom) */
  --rx-ink:         #38404d;   /* body text */
  --rx-ink-soft:    #5d6675;   /* secondary text */
  --rx-ink-muted:   #7b8493;   /* captions / toc labels (interior.css) */
  --rx-grey:        #8d939c;   /* muted surface */
  --rx-grey-200:    #dde3ea;   /* borders/dividers */
  --rx-grey-100:    #eef3f7;   /* section bg */
  --rx-grey-50:     #f6fafc;   /* soft section bg */
  --rx-white:       #ffffff;

  /* ---- Semantic roles ---- */
  --rx-bg:          var(--rx-white);
  --rx-bg-alt:      var(--rx-grey-100);
  --rx-border:      var(--rx-grey-200);
  --rx-primary:     var(--rx-cyan);
  --rx-primary-ink: var(--rx-white);
  --rx-link:        var(--rx-cyan-deep);
  --rx-link-hover:  var(--rx-cyan-dark);
  --rx-heading:     var(--rx-navy);
  /* Back-compat: rules del kit que referencian naranja/azul → map a la paleta Lysafe. */
  --rx-orange:      var(--rx-cyan);
  --rx-orange-dark: var(--rx-cyan-dark);
  --rx-blue-700:    var(--rx-cyan);
  --rx-blue-500:    var(--rx-cyan-dark);

  /* ---- Typography (system UI stack — sin web fonts) ---- */
  --rx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --rx-font-head: var(--rx-font-body);
  --rx-fw-regular: 400;
  --rx-fw-semibold: 600;
  --rx-fw-bold: 700;

  /* Modular type scale (1.250 major third) */
  --rx-text-xs:   0.8rem;
  --rx-text-sm:   0.9rem;
  --rx-text-base: 1rem;
  --rx-text-md:   1.125rem;
  --rx-text-lg:   1.5rem;
  --rx-text-xl:   2rem;
  --rx-text-2xl:  2.5rem;
  --rx-text-3xl:  3.25rem;
  --rx-leading-tight:  1.15;
  --rx-leading-normal: 1.6;

  /* ---- Layout ---- */
  --rx-container:        1200px;
  --rx-container-narrow: 820px;
  --rx-gutter:           clamp(1rem, 4vw, 2.5rem);
  --rx-header-h:         88px;

  /* ---- Spacing scale ---- */
  --rx-space-1: 0.5rem;
  --rx-space-2: 1rem;
  --rx-space-3: 1.5rem;
  --rx-space-4: 2.5rem;
  --rx-space-5: 4rem;
  --rx-space-6: 6rem;

  /* ---- Radius / shadow / motion ---- */
  --rx-radius:    8px;
  --rx-radius-lg: 18px;
  --rx-shadow-sm: 0 1px 3px rgba(20, 37, 61, 0.08);
  --rx-shadow-md: 0 10px 34px rgba(20, 37, 61, 0.12);
  --rx-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}