/* ============================================================
   RINSA INC. — Design Tokens (Variables CSS)
   Fuente de verdad del sistema de diseño visual.
   Basado en: 01-estilo-grafico.md
   ============================================================ */

:root {
  /* ── Colores Primarios de Marca ── */
  --color-red:              #B01C2E;
  --color-blue:             #1A3A6B;
  --color-cream:            #FAF8F5;
  --color-black:            #0D0D0D;

  /* ── Variaciones del Rojo ── */
  --color-red-dark:         #8C1521;
  --color-red-primary:      #B01C2E;
  --color-red-medium:       #C9283E;
  --color-red-light:        #FDF0F1;

  /* ── Variaciones del Azul ── */
  --color-blue-dark:        #102850;
  --color-blue-primary:     #1A3A6B;
  --color-blue-medium:      #2451A0;
  --color-blue-light:       #EDF2FA;

  /* ── Neutros ── */
  --color-black-pure:       #000000;
  --color-black-soft:       #0D0D0D;
  --color-gray-900:         #333333;
  --color-gray-600:         #666666;
  --color-gray-400:         #888888;
  --color-gray-300:         #CCCCCC;
  --color-gray-100:         #F0EFED;
  --color-cream-bg:         #FAF8F5;
  --color-white:            #FFFFFF;

  /* ── Colores por Hub NIS (Acentos) ── */
  --hub-rinsa-educa:        #1A3A6B;   /* Rinsa Educa */
  --hub-rinsa-advisors:     #B01C2E;   /* Rinsa Advisors */
  --hub-rinsa-smart:        #2451A0;   /* Rinsa Smart */
  --hub-rinsa-apeiron:      #4A5568;   /* Rinsa Apeiron */
  --hub-rinsa-experiences:  #2D6A4F;   /* Rinsa Experiences */
  --hub-rinsa-retail:       #9B6A2E;   /* Rinsa Retail */
  --hub-rinsa-killapu:      #4A1D6B;   /* Rinsa Killapu */

  /* ── Colores por Hub PAIS / AEG ── */
  --hub-fundacion:          #1A7A4A;   /* Fundación Rinsa (PAIS) */
  --hub-rinsa-club:         #B01C2E;   /* Rinsa Club (AEG) — rojo corporativo */

  /* ── Colores de Estado ── */
  --color-success:          #1A7A4A;
  --color-warning:          #A0620A;
  --color-info:             #1A3A6B;
  --color-error:            #B01C2E;

  /* ── Tipografía ── */
  --font-heading:           'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:              'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Escala Tipográfica (Modular 1.25) ── */
  --text-hero:              clamp(2.5rem, 5vw, 4rem);
  --text-h1:                clamp(2rem, 3.5vw, 3rem);
  --text-h2:                clamp(1.5rem, 2.5vw, 2rem);
  --text-h3:                clamp(1.25rem, 2vw, 1.5rem);
  --text-h4:                1.125rem;
  --text-body-lg:           1.125rem;
  --text-body:              1rem;
  --text-body-sm:           0.875rem;
  --text-caption:           0.75rem;
  --text-label:             0.875rem;
  --text-badge:             0.75rem;
  --text-button:            1rem;

  /* ── Pesos Tipográficos ── */
  --fw-light:               300;
  --fw-regular:             400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;
  --fw-extrabold:           800;

  /* ── Interlineado ── */
  --lh-heading:             1.2;
  --lh-body:                1.6;

  /* ── Espaciado (Base 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;
  --space-10:               128px;

  /* ── Bordes y Radios ── */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-full:            9999px;

  /* ── Sombras ── */
  --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:              0 12px 40px rgba(0, 0, 0, 0.16);
  --shadow-btn-red:         0 4px 12px rgba(176, 28, 46, 0.3);
  --shadow-btn-blue:        0 4px 12px rgba(26, 58, 107, 0.3);

  /* ── Transiciones ── */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        400ms ease;
  --transition-spring:      500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --max-width:              1280px;
  --gutter-mobile:          16px;
  --gutter-tablet:          24px;
  --gutter-desktop:         32px;

  /* ── Alturas de componentes ── */
  --topbar-height:          40px;
  --navbar-height:          72px;
  --header-total:           112px; /* topbar + navbar */

  /* ── Z-Index Scale ── */
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-overlay:              300;
  --z-modal:                400;
  --z-topbar:               500;
}