/* ==========================================================================
   R Suit — Panel de cuenta de Reservations Insider
   Sistema de diseño. CSS puro sobre Bootstrap 5. Prefijo rs-.
   Una sola cuenta, una sola empresa, cuatro productos.
   ========================================================================== */

:root {
  /* Marca — índigo Reservations Insider */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  /* Color propio de cada aplicación del ecosistema */
  --app-ri:  #4F46E5;   /* Reservations Insider */
  --app-jb:  #E8A23A;   /* Jobs */
  --app-ex:  #DC2626;   /* Expo Digital */
  --app-cm:  #2166F5;   /* Community */
  --app-ri-soft: #EEF2FF;
  --app-jb-soft: #FDF3E3;
  --app-ex-soft: #FEECEC;
  --app-cm-soft: #EAF1FE;

  /* Neutrales — carbón, no negro puro */
  --ink:       #14181F;
  --ink-2:     #384152;
  --muted:     #64748B;
  --faint:     #94A0B4;
  --line:      #E3E7EE;
  --line-soft: #F3F5F8;
  --canvas:    #F8F9FB;
  --surface:   #FFFFFF;

  /* Acentos funcionales */
  --ok:         #12A56C;
  --ok-soft:    #E6F8F0;
  --warn:       #E8A23A;
  --warn-soft:  #FDF3E3;
  --danger:     #E5484D;
  --danger-soft:#FDECEC;

  /* Radios */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(20, 24, 31, .06);
  --sh-md: 0 8px 24px rgba(20, 24, 31, .10);
  --sh-lg: 0 20px 48px rgba(20, 24, 31, .16);
  --sh-brand: 0 10px 28px rgba(79, 70, 229, .28);

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;

  --top-h: 64px;
  --side-w: 268px;
}