/* ============================================================
   RC TOKENS — Sistema de diseño Rodríguez Cons Abogados
   Fuente ÚNICA de tokens del proyecto.
   Se encola antes de style.css (ver functions.php).
   Cualquier widget o sección de Elementor hereda estos valores.
   ============================================================ */
:root {

  /* —— Colores de marca —— */
  --rc-navy:          #203152;   /* azul profundo — color base, CTA primario */
  --rc-navy-900:      #16223A;   /* footer, fondos más profundos */
  --rc-navy-800:      #1B2B47;   /* secciones oscuras estándar */
  --rc-navy-700:      #203152;   /* alias navy */
  --rc-navy-600:      #2C4068;   /* hover, bordes sobre oscuro */
  --rc-navy-050:      #EEF1F6;   /* fondo de iconos, halo de focus */

  --rc-burgundy:      #5A0334;   /* burdeos — acento jurídico, CTA emocional */
  --rc-burgundy-900:  #3D0123;   /* hover del burdeos */
  --rc-burgundy-700:  #5A0334;   /* alias */
  --rc-burgundy-500:  #7A0A4A;   /* variante media */
  --rc-burgundy-050:  #F7EEF2;   /* fondo sutil burdeos */

  --rc-gold:          #B69D74;   /* dorado cálido — detalle premium */
  --rc-gold-700:      #8B7549;   /* dorado accesible para texto sobre claro */
  --rc-gold-500:      #B69D74;   /* alias */
  --rc-gold-300:      #D8C8A8;   /* selección de texto */
  --rc-gold-050:      #F7F2E9;   /* fondo sutil dorado */

  /* —— Superficies y fondos —— */
  --rc-paper:         #FBF9F5;   /* fondo principal del sitio */
  --rc-surface:       #FFFFFF;   /* tarjetas y elementos elevados */
  --rc-surface-2:     #F3EFE8;   /* sección clara alternativa / arena */
  --rc-gray-100:      #EDEDED;

  /* —— Texto —— */
  --rc-ink:           #1A2233;   /* texto principal */
  --rc-ink-2:         #4A5365;   /* texto secundario */
  --rc-ink-3:         #717A8A;   /* texto terciario / placeholder */
  --rc-on-dark:       #F4F1EB;   /* texto sobre fondos oscuros */
  --rc-on-dark-2:     #AEB8CA;   /* texto secundario sobre oscuro */

  /* —— Bordes —— */
  --rc-border:        #E7E1D6;
  --rc-border-2:      #D9D2C4;
  --rc-border-dark:   rgba(244, 241, 235, 0.14);

  /* —— Estados funcionales —— */
  --rc-success:       #2F6B4F;
  --rc-success-050:   #EAF2ED;
  --rc-warning:       #B8862B;
  --rc-warning-050:   #F8F0DD;
  --rc-error:         #9B2D3A;
  --rc-error-050:     #F8EAEB;
  --rc-info:          #2E5A7A;
  --rc-info-050:      #E9F1F6;

  /* —— Tipografías —— */
  --rc-font-sans:     "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rc-font-serif:    "Spectral", Georgia, "Times New Roman", serif;  /* SOLO cifras y citas */

  /* —— Escala tipográfica (fluid) —— */
  --rc-fs-display:    clamp(2.6rem, 1.4rem + 5vw, 4.75rem);    /* Hero principal */
  --rc-fs-h1:         clamp(2.1rem, 1.4rem + 3vw, 3.35rem);
  --rc-fs-h2:         clamp(1.7rem, 1.25rem + 1.9vw, 2.45rem);
  --rc-fs-h3:         clamp(1.35rem, 1.15rem + .85vw, 1.7rem);
  --rc-fs-h4:         clamp(1.1rem, 1.04rem + .35vw, 1.25rem);
  --rc-fs-lead:       clamp(1.1rem, 1.02rem + .5vw, 1.35rem);
  --rc-fs-body:       1.0625rem;   /* 17px */
  --rc-fs-small:      0.9375rem;   /* 15px */
  --rc-fs-label:      0.75rem;     /* 12px — kicker/label */

  /* —— Espaciado (base 8) —— */
  --rc-s-1:           4px;
  --rc-s-2:           8px;
  --rc-s-3:           12px;
  --rc-s-4:           16px;
  --rc-s-5:           24px;
  --rc-s-6:           32px;
  --rc-s-7:           48px;
  --rc-s-8:           64px;
  --rc-s-9:           96px;
  --rc-s-10:          128px;
  --rc-section-y:     clamp(64px, 8vw, 128px);
  --rc-gutter:        clamp(20px, 5vw, 48px);

  /* —— Radios —— */
  --rc-r-sm:          8px;    /* inputs, tags */
  --rc-r-md:          12px;   /* botones */
  --rc-r-lg:          18px;   /* cards */
  --rc-r-xl:          28px;   /* imágenes, CTA */
  --rc-r-pill:        999px;  /* badges, chips */

  /* —— Sombras tintadas en navy —— */
  --rc-sh-xs:   0 1px 2px rgba(32, 49, 82, 0.06);
  --rc-sh-sm:   0 4px 14px -6px rgba(32, 49, 82, 0.12);
  --rc-sh-md:   0 18px 40px -18px rgba(32, 49, 82, 0.22);
  --rc-sh-lg:   0 40px 80px -28px rgba(32, 49, 82, 0.30);

  /* —— Movimiento —— */
  --rc-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --rc-dur:     0.32s;

  /* —— Layout —— */
  --rc-container: 1200px;
  --rc-z-header:  100;
}

/* ============================================================
   SINCRONIZACIÓN ELEMENTOR KIT ↔ RC TOKENS  (opcional)
   Los Global Colors de Elementor generan variables del tipo
   --e-global-color-XXXX. Para que ambos sistemas apunten al
   mismo valor, descomenta y sustituye los IDs reales.

   Cómo obtener los IDs:
   1. Elementor → Site Settings → Global Colors (crea los 22 colores).
   2. Inspecciona el elemento :root con DevTools.
   3. Copia los IDs --e-global-color-XXXX generados.
   4. Sustituye los XXXX de abajo y descomenta el bloque.
   ============================================================ */
/*
:root {
  --rc-navy:      var(--e-global-color-primary);
  --rc-burgundy:  var(--e-global-color-accent);
  --rc-gold:      var(--e-global-color-XXXX);
  --rc-paper:     var(--e-global-color-XXXX);
  --rc-ink:       var(--e-global-color-text);
}
*/